/* RootTrace Heritage LLC — Genealogy Guide | example1.com */
/* Palette: Parchment #FAF6EE | Walnut #3D2B1F | Sage #4A7C6F | Gold #C9A050 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  background: #FAF6EE;
  color: #2A1F14;
  line-height: 1.75;
}

/* UNIQUE PATTERN: diagonal-stripe texture on alternating sections */
.stripe-bg {
  background: repeating-linear-gradient(
    -45deg,
    #F5F0E6 0px, #F5F0E6 12px,
    #EDE8DC 12px, #EDE8DC 24px
  );
}

a { color: #4A7C6F; text-decoration: none; }
a:hover { color: #C9A050; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; border-radius: 8px; }

/* ── HEADER ── */
.site-header {
  background: #3D2B1F;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.header-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-logo {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: bold;
  color: #C9A050;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.site-logo:hover { color: #FAF6EE; text-decoration: none; }

nav ul {
  list-style: none;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
nav a {
  color: #E8DCC8;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 4px;
  display: block;
  transition: color 0.25s, background 0.25s;
}
nav a:hover, nav a.active {
  color: #C9A050;
  background: rgba(201,160,80,0.12);
  text-decoration: none;
}

/* mobile menu */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid #C9A050;
  color: #C9A050;
  padding: 6px 12px;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 4px;
}

/* ── HERO ── */
.hero {
  background: #3D2B1F url('img-hero.jpg') center/cover no-repeat;
  background-blend-mode: multiply;
  color: #FAF6EE;
  text-align: center;
  padding: 110px 24px 90px;
  position: relative;
}
/* UNIQUE PATTERN: gold top border accent on hero */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #C9A050, #8B6914, #C9A050);
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.25;
  margin-bottom: 20px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.hero p {
  font-size: 1.15rem;
  max-width: 620px;
  margin: 0 auto 32px;
  opacity: 0.92;
}
.btn {
  display: inline-block;
  background: #C9A050;
  color: #3D2B1F;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 13px 30px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  text-decoration: none;
}
.btn:hover { background: #FAF6EE; color: #3D2B1F; text-decoration: none; }
.btn-outline {
  background: transparent;
  border: 2px solid #4A7C6F;
  color: #4A7C6F;
}
.btn-outline:hover { background: #4A7C6F; color: #FAF6EE; }

/* ── STATS STRIP ── */
.stats-strip {
  background: #4A7C6F;
  color: #FAF6EE;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.stat-item {
  flex: 1 1 180px;
  text-align: center;
  padding: 28px 20px;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.stat-item:last-child { border-right: none; }
.stat-item .num { font-size: 2rem; font-weight: bold; color: #C9A050; }
.stat-item .lbl { font-size: 0.85rem; font-family: Arial, sans-serif; opacity: 0.9; margin-top: 4px; }

/* ── SECTIONS ── */
.section { padding: 72px 24px; }
.container { max-width: 1100px; margin: 0 auto; }
.section-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: #3D2B1F;
  margin-bottom: 12px;
}
.section-lead {
  font-size: 1.05rem;
  color: #5A4535;
  max-width: 680px;
  margin-bottom: 48px;
}

/* UNIQUE PATTERN: alternating feature rows (image + text side by side) */
.feature-row {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 60px;
}
.feature-row.reverse { flex-direction: row-reverse; }
.feature-row .feat-img { flex: 0 0 42%; }
.feature-row .feat-text { flex: 1; }
.feature-row .feat-text h3 {
  font-size: 1.45rem;
  color: #3D2B1F;
  margin-bottom: 12px;
}
.feature-row .feat-text p { color: #4A3728; margin-bottom: 10px; }

/* ── TIMELINE (unique pattern) ── */
.timeline { position: relative; padding-left: 40px; margin-top: 32px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 14px; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #C9A050, #4A7C6F);
  border-radius: 2px;
}
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -33px; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #C9A050;
  border: 3px solid #3D2B1F;
}
.timeline-item h4 {
  font-size: 1.15rem;
  color: #3D2B1F;
  margin-bottom: 6px;
}
.timeline-item p { color: #4A3728; font-size: 0.97rem; }

/* ── CARDS GRID ── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.card {
  background: #fff;
  border: 1px solid #E0D8CC;
  border-radius: 8px;
  padding: 28px 24px;
  /* UNIQUE: top colored border per card */
  border-top: 4px solid #C9A050;
  transition: box-shadow 0.25s;
}
.card:hover { box-shadow: 0 6px 24px rgba(61,43,31,0.12); }
.card h4 { font-size: 1.1rem; color: #3D2B1F; margin-bottom: 10px; }
.card p { color: #5A4535; font-size: 0.95rem; }
.card.sage-top { border-top-color: #4A7C6F; }

/* CSS-only icon shapes */
.icon-tree, .icon-dna, .icon-doc, .icon-search, .icon-lock, .icon-globe {
  width: 48px; height: 48px;
  margin-bottom: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* hide any text */
  position: relative;
}
.icon-tree { background: #4A7C6F; }
.icon-tree::before {
  content: '';
  width: 20px; height: 20px;
  background: #FAF6EE;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.icon-dna { background: #C9A050; }
.icon-dna::before {
  content: '';
  width: 6px; height: 28px;
  background: #fff;
  border-radius: 3px;
  transform: rotate(20deg);
  box-shadow: 8px 0 0 #fff;
}
.icon-doc { background: #3D2B1F; }
.icon-doc::before {
  content: '';
  width: 20px; height: 24px;
  background: #FAF6EE;
  border-radius: 2px;
  box-shadow: inset 2px 6px 0 #E0D8CC, inset 2px 12px 0 #E0D8CC;
}
.icon-search { background: #4A7C6F; }
.icon-search::before {
  content: '';
  width: 16px; height: 16px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 7px 7px 0 #fff;
}
.icon-lock { background: #C9A050; }
.icon-lock::before {
  content: '';
  width: 18px; height: 20px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 -10px 0 3px #fff;
}
.icon-globe { background: #3D2B1F; }
.icon-globe::before {
  content: '';
  width: 22px; height: 22px;
  border: 3px solid #FAF6EE;
  border-radius: 50%;
  box-shadow: 0 0 0 0 transparent, inset 5px 0 0 rgba(250,246,238,0.3);
}

/* ── PRICING ── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.price-card {
  background: #fff;
  border: 1px solid #E0D8CC;
  border-radius: 10px;
  padding: 36px 28px;
  text-align: center;
  position: relative;
}
.price-card.featured {
  border-color: #C9A050;
  box-shadow: 0 8px 32px rgba(201,160,80,0.18);
}
.price-card .badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: #C9A050;
  color: #3D2B1F;
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: bold;
  padding: 4px 16px;
  border-radius: 20px;
}
.price-card h3 { font-size: 1.25rem; color: #3D2B1F; margin-bottom: 12px; }
.price-card .price { font-size: 2.4rem; font-weight: bold; color: #4A7C6F; }
.price-card .price span { font-size: 1rem; color: #7A6555; }
.price-card ul { list-style: none; text-align: left; margin: 20px 0; color: #4A3728; font-size: 0.93rem; }
.price-card ul li { padding: 5px 0; border-bottom: 1px solid #F0EBE0; }
.price-card ul li::before { content: '✓ '; color: #4A7C6F; font-weight: bold; }

/* ── FORM ── */
.contact-form { max-width: 680px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; display: flex; flex-direction: column; }
.form-group label { font-size: 0.9rem; color: #3D2B1F; font-weight: bold; margin-bottom: 6px; font-family: Arial, sans-serif; }
.form-group input, .form-group select, .form-group textarea {
  border: 1px solid #C8BEB0;
  border-radius: 5px;
  padding: 11px 14px;
  font-size: 0.95rem;
  font-family: Georgia, serif;
  background: #fff;
  color: #2A1F14;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: #4A7C6F;
}
.form-group textarea { min-height: 110px; resize: vertical; }

/* ── BREADCRUMB ── */
.breadcrumb {
  background: #F0EBE0;
  padding: 10px 24px;
  font-size: 0.85rem;
  font-family: Arial, sans-serif;
  color: #7A6555;
  border-bottom: 1px solid #E0D8CC;
}
.breadcrumb a { color: #4A7C6F; }

/* ── TESTIMONIALS ── */
.testimonials { background: #3D2B1F; color: #FAF6EE; padding: 72px 24px; }
.testimonials .section-title { color: #C9A050; }
.testimonials .section-lead { color: #C8BEB0; }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
.testi-card {
  background: rgba(250,246,238,0.08);
  border: 1px solid rgba(201,160,80,0.25);
  border-radius: 8px;
  padding: 28px 24px;
}
.testi-card p { font-style: italic; color: #E8DCC8; margin-bottom: 14px; }
.testi-card .author { font-family: Arial, sans-serif; font-size: 0.85rem; color: #C9A050; }

/* ── CTA ── */
.cta-section { background: #4A7C6F; color: #FAF6EE; text-align: center; padding: 72px 24px; }
.cta-section h2 { font-size: 2rem; margin-bottom: 14px; }
.cta-section p { font-size: 1.05rem; opacity: 0.9; max-width: 560px; margin: 0 auto 28px; }

/* ── FOOTER ── */
.site-footer {
  background: #2A1F14;
  color: #C8BEB0;
  padding: 56px 24px 28px;
  font-family: Arial, sans-serif;
  font-size: 0.88rem;
}
.footer-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 36px;
  margin-bottom: 36px;
}
.footer-col h4 { color: #C9A050; font-size: 0.92rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 7px; }
.footer-col ul li a { color: #C8BEB0; transition: color 0.2s; }
.footer-col ul li a:hover { color: #C9A050; text-decoration: none; }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(200,190,176,0.2);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  color: #8A7A6A;
  font-size: 0.82rem;
}
.footer-disclaimer { max-width: 1100px; margin: 16px auto 0; color: #7A6A5A; font-size: 0.8rem; line-height: 1.5; }

/* ── SCROLL REVEAL ── */
.reveal { transform: translateY(44px); transition: transform 0.55s ease, opacity 0.55s ease; opacity: 0.01; }
.reveal.visible { transform: translateY(0); opacity: 1; }

/* ── COOKIE BANNER ── */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #2A1F14;
  color: #E8DCC8;
  padding: 16px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  z-index: 999;
  font-family: Arial, sans-serif;
  font-size: 0.88rem;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.4);
}
#cookie-banner a { color: #C9A050; }
#cookie-banner button { background: #4A7C6F; color: #fff; border: none; padding: 8px 20px; border-radius: 4px; cursor: pointer; font-size: 0.88rem; }
#cookie-banner button:hover { background: #C9A050; color: #2A1F14; }

/* ── PROGRESS BAR ── */
#progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, #C9A050, #4A7C6F);
  width: 0%;
  z-index: 200;
  transition: width 0.1s linear;
}

/* ── LEGAL PAGES ── */
.legal-content { max-width: 820px; margin: 0 auto; padding: 56px 24px; }
.legal-content h1 { font-size: 1.9rem; color: #3D2B1F; margin-bottom: 8px; }
.legal-content h2 { font-size: 1.25rem; color: #3D2B1F; margin: 32px 0 10px; }
.legal-content p, .legal-content li { color: #4A3728; margin-bottom: 12px; line-height: 1.8; }
.legal-content ul { padding-left: 24px; }
.effective { font-size: 0.88rem; color: #7A6555; margin-bottom: 28px; font-family: Arial, sans-serif; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .feature-row, .feature-row.reverse { flex-direction: column; gap: 24px; }
  .feature-row .feat-img { flex: none; width: 100%; }
  nav ul { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #3D2B1F; padding: 12px; }
  nav ul.open { display: flex; }
  .menu-toggle { display: block; }
  .header-inner { position: relative; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-strip { flex-direction: column; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}