/*
Theme Name: True Wealth Financial
Theme URI: https://twfinancial.com/
Author: Recreated from archive
Description: Custom one-page theme recreating the twfinancial.com site, restored from an August 2025 Wayback Machine snapshot after the original site expired. Colors, type, and copy were reconstructed by hand from the archived page, so treat this as a faithful re-creation rather than a byte-for-byte copy of the original theme.
Version: 1.0
Requires PHP: 7.4
Text Domain: true-wealth-financial
*/

:root{
  --gold: #C3891E;
  --gold-dark: #A8721A;
  --dark: #2B2B2B;
  --dark-2: #232323;
  --text-gray: #616670;
  --white: #FFFFFF;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text-gray);
  font-size:16px;
  line-height:1.6;
  background:var(--white);
}

img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; color:inherit; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.btn{
  display:inline-block;
  background:var(--gold);
  color:var(--white);
  font-weight:600;
  letter-spacing:.03em;
  padding:16px 32px;
  text-decoration:underline;
  transition:background .2s ease;
}
.btn:hover{ background:var(--gold-dark); }
.eyebrow{
  color:var(--gold);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:8px;
  display:block;
}
h1,h2,h3{ font-family:var(--font); font-weight:800; color:var(--dark); margin:0 0 16px; }
h1{ font-size:52px; line-height:1.15; color:var(--white); }
h2{ font-size:36px; }

/* ---------- Header ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  max-width:1200px;
  margin:0 auto;
}
.site-header .logo img{ max-height:70px; }
.site-header nav ul{
  list-style:none;
  display:flex;
  gap:32px;
  margin:0;
  padding:0;
}
.site-header nav a{ font-weight:600; color:var(--dark); }
.site-header nav a:hover{ color:var(--gold); }
.header-cta{
  background:var(--gold);
  color:#fff;
  font-weight:700;
  padding:12px 22px;
}
.menu-toggle{ display:none; background:none; border:0; font-size:26px; cursor:pointer; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(rgba(30,30,30,.55),rgba(30,30,30,.55)), var(--dark) url('images/hero-image.jpg') center/cover no-repeat;
  padding:140px 24px;
  min-height:480px;
  display:flex;
  align-items:center;
}
.hero-inner{ max-width:640px; border-left:4px solid var(--gold); padding-left:28px; }
.hero p{ color:var(--white); font-size:18px; max-width:520px; }

/* ---------- About ---------- */
.section{ padding:90px 0; }
.section-light{ background:var(--white); }
.about p{ max-width:820px; }

/* ---------- Client Experience (dark) ---------- */
.experience{
  background:var(--dark);
  color:#d8d8d8;
  padding:90px 0;
}
.experience h2{ color:var(--white); }
.experience-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}
.experience-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:48px;
}
.experience-card h3{ color:var(--gold); font-size:20px; }
.experience-card p{ color:#c9c9c9; font-size:15px; }
.experience-img img{ border:4px solid var(--gold); }

/* ---------- Services ---------- */
.services-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:48px;
}
.service-col{ background:#faf8f4; padding:36px; border-top:4px solid var(--gold); }
.service-col h3{ font-size:22px; }
.service-col ul{ margin:0; padding-left:20px; color:var(--text-gray); }
.service-col li{ margin-bottom:10px; }
.service-col img{ margin-bottom:20px; border-radius:4px; }
.quote-block{
  text-align:center;
  font-style:italic;
  font-size:20px;
  color:var(--dark);
  max-width:760px;
  margin:60px auto 0;
}

/* ---------- Founder ---------- */
.founder{ background:var(--white); }
.founder-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:48px;
  align-items:flex-start;
}
.founder-grid img{ border-radius:4px; }
.founder blockquote{
  margin:24px 0 0;
  padding:20px 24px;
  border-left:4px solid var(--gold);
  font-style:italic;
  background:#faf8f4;
}

/* ---------- FAQ ---------- */
.faq{ background:#faf8f4; }
.faq-group{ margin-bottom:36px; }
.faq-group h4{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:14px;
  color:var(--gold);
  margin-bottom:18px;
}
.faq-item{ border-bottom:1px solid #e2ddd3; }
.faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:0;
  padding:18px 0;
  font-weight:700;
  font-size:17px;
  color:var(--dark);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-family:var(--font);
}
.faq-question::after{ content:'+'; font-size:22px; color:var(--gold); transition:transform .2s ease; }
.faq-item.open .faq-question::after{ transform:rotate(45deg); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding:0 0 0;
}
.faq-item.open .faq-answer{ max-height:600px; padding-bottom:18px; }

/* ---------- CTA ---------- */
.cta{
  background:linear-gradient(rgba(30,30,30,.7),rgba(30,30,30,.7)), var(--dark) url('images/photo-4-a.jpg') center/cover no-repeat;
  padding:90px 24px;
  text-align:center;
}
.cta h2{ color:var(--white); }
.cta p{ color:#eee; max-width:600px; margin:0 auto 28px; }

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--dark-2);
  color:#bdbdbd;
  padding:60px 0 24px;
  font-size:15px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin-bottom:36px;
}
.footer-grid h4{ color:var(--gold); text-transform:uppercase; font-size:13px; letter-spacing:.08em; margin-bottom:12px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-legal{ border-top:1px solid #3a3a3a; padding-top:20px; font-size:13px; color:#8a8a8a; }

/* ---------- Simple pages (Contact / Privacy) ---------- */
.simple-page{ padding:100px 0 90px; max-width:820px; margin:0 auto; }
.simple-page h1{ color:var(--dark); font-size:38px; }
.simple-page h2{ font-size:22px; margin-top:36px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  h1{ font-size:38px; }
  .experience-grid, .founder-grid, .services-grid{ grid-template-columns:1fr; }
  .experience-cards{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .site-header nav{ display:none; }
}