/*
  Font notes:
  - Prata & Crimson Pro are free Google Fonts, loaded directly, and will render exactly as intended.
  - Tan Aegean (all-caps section headers) and BD Script (the single script flourish) are premium
    fonts Anna owns but the font files weren't available to build this page, so this stylesheet
    falls back to Playfair Display (wide-set elegant serif) and Alex Brush (flowing script) instead.
    If Anna supplies the Tan Aegean / BD Script .woff2 files, swap the font-family values below
    (marked FALLBACK) and add @font-face rules for a pixel-perfect match.
*/

:root {
  --bg: #EFEFEF;
  --ink: #1A1A1A;
  --olive: #5A742D;
  --white: #FFFFFF;

  --font-title: 'Prata', 'Georgia', serif;
  --font-header: 'Playfair Display', 'Prata', serif; /* FALLBACK for Tan Aegean */
  --font-body: 'Crimson Pro', 'Georgia', serif;
  --font-script: 'Alex Brush', cursive; /* FALLBACK for BD Script */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}

a { color: inherit; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 30px;
  border-radius: 2px;
  border: 1.5px solid var(--olive);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--olive);
  color: var(--white);
}
.btn-primary:hover { background: #4a5f24; }
.btn-outline {
  background: transparent;
  color: var(--ink);
}
.btn-outline:hover { background: var(--olive); color: var(--white); }
.btn-full { width: 100%; text-align: center; border-radius: 2px; margin-top: 6px; cursor: pointer; }

/* Header */
.site-header {
  padding: 22px 0;
  border-bottom: 1px solid rgba(26,26,26,0.12);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.brand-name {
  font-family: var(--font-title);
  font-size: 22px;
  display: block;
}
.brand-tag {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a4a4a;
}

/* Hero */
.hero { padding: 90px 0 60px; text-align: center; }
.script-flourish {
  font-family: var(--font-script);
  font-size: 44px;
  color: var(--olive);
  margin: 0 0 -6px;
}
.hero h1 {
  font-family: var(--font-title);
  font-size: 52px;
  line-height: 1.15;
  margin: 10px 0 24px;
}
.hero-copy {
  max-width: 620px;
  margin: 0 auto 34px;
  font-size: 19px;
  color: #2b2b2b;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Olive divider bar - signature device */
.olive-bar {
  width: 100%;
  height: 0.3in;
  background: var(--olive);
}

/* Section shared */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--olive);
  text-align: center;
  margin: 0 0 10px;
}
.section-title {
  font-family: var(--font-title);
  font-size: 36px;
  text-align: center;
  margin: 0 0 16px;
}
.section-copy {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  color: #2b2b2b;
}

/* Calculators */
.calculators { padding: 70px 0 80px; }

.toggle-group {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 44px;
  width: fit-content;
  border: 1.5px solid var(--olive);
  border-radius: 2px;
  overflow: hidden;
}
.toggle-btn {
  font-family: var(--font-header);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 14px 30px;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.toggle-btn.is-active { background: var(--olive); color: var(--white); }

.calc-panel { display: none; }
.calc-panel.is-active { display: block; }

.calc-header {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 20px;
  text-align: center;
  margin: 0 0 30px;
}

.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) 1px minmax(0, 1fr);
  gap: 40px;
  background: var(--white);
  padding: 40px;
  border: 1px solid rgba(26,26,26,0.1);
}

.calc-inputs { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.calc-inputs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #444;
}
.calc-inputs input, .calc-inputs select {
  font-family: var(--font-body);
  font-size: 17px;
  padding: 10px 12px;
  border: 1px solid #c7c7c7;
  background: var(--bg);
  color: var(--ink);
  border-radius: 2px;
}
.input-prefix, .input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid #c7c7c7;
  background: var(--bg);
  border-radius: 2px;
}
.input-prefix span, .input-suffix span {
  padding: 0 10px;
  color: #666;
  font-weight: 600;
}
.input-prefix input, .input-suffix input {
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.input-row { display: flex; gap: 10px; min-width: 0; }
.input-row .input-prefix { flex: 1.4; min-width: 0; }
.input-row .input-suffix { flex: 1; min-width: 0; }

.calc-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.result-label {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  margin: 0 0 6px;
  color: #444;
}
.result-figure {
  font-family: var(--font-title);
  font-size: 46px;
  color: var(--olive);
  margin: 0 0 18px;
}
.result-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  border-top: 1px solid rgba(26,26,26,0.12);
}
.result-breakdown li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(26,26,26,0.08);
  font-size: 15px;
}
.result-note {
  font-size: 13px;
  color: #777;
  font-style: italic;
  margin: 0;
}

/* Schedule */
.schedule { padding: 70px 0 90px; }

.schedule-cta {
  text-align: center;
  margin: 0 auto 34px;
}
.btn-large {
  font-size: 18px;
  padding: 18px 44px;
}
.schedule-cta-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: #666;
}
.schedule-or {
  text-align: center;
  margin: 0 0 34px;
  position: relative;
  color: #777;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.schedule-or span { background: var(--bg); padding: 0 16px; position: relative; z-index: 1; }
.schedule-or::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid rgba(26,26,26,0.15);
}
.schedule-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 1px minmax(0, 1fr);
  gap: 40px;
  background: var(--white);
  padding: 44px;
  border: 1px solid rgba(26,26,26,0.1);
  align-items: start;
}
.grid-divider {
  background: rgba(26,26,26,0.15);
  align-self: stretch;
}

.contact-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #444;
}
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 11px 12px;
  border: 1px solid #c7c7c7;
  background: var(--bg);
  border-radius: 2px;
  resize: vertical;
}
.hidden-field { position: absolute; left: -9999px; }

.schedule-aside { padding-top: 6px; min-width: 0; }
.aside-label {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
  margin: 0 0 10px;
}
.aside-link {
  display: inline-block;
  font-size: 18px;
  color: var(--olive);
  text-decoration: none;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--olive);
}
.aside-note {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* Footer */
.site-footer {
  padding: 50px 0 40px;
  text-align: center;
  border-top: 1px solid rgba(26,26,26,0.12);
}
.palmetto { width: 46px; height: auto; margin-bottom: 14px; }
.footer-contact {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 16px;
  margin: 0 0 6px;
}
.footer-detail { margin: 0 0 14px; font-size: 15px; }
.footer-detail a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.footer-brokerage {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 13px;
  color: #555;
  margin: 0;
}

@media (max-width: 760px) {
  .hero { padding: 60px 0 44px; }
  .hero h1 { font-size: 34px; }
  .script-flourish { font-size: 36px; }
  .hero-copy { font-size: 17px; }
  .section-title { font-size: 28px; }
  .calc-grid, .schedule-grid { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 30px; }
  .grid-divider { display: none; }
  .schedule-aside { border-top: 1px solid rgba(26,26,26,0.12); padding-top: 24px; }

  .toggle-group { width: 100%; display: flex; }
  .toggle-btn { flex: 1; padding: 14px 10px; font-size: 13px; }

  .calc-header { font-size: 17px; }
  .result-figure { font-size: 36px; }
  .btn-large { width: 100%; text-align: center; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 18px; }
  .calc-grid, .schedule-grid { padding: 18px; }
  .input-row { flex-direction: column; }
}