/* --------- Base Styles --------- */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
  background-color: #f9fafb;
}

body {
  line-height: 1.6;
}

a {
  color: #0f766e;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------- Layout --------- */
.wrapper {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --------- Header & Nav --------- */
.site-header {
  background-color: #0f172a;
  color: #e5e7eb;
  border-bottom: 1px solid #111827;
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  gap: 1.5rem;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo img {
  height: 67px;
  width: auto;
  display: block;
}

@media (max-width: 480px) {
  .brand-logo img {
    height: 36px;
  }
}
.brand-name {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-tagline {
  font-size: 0.85rem;
  color: #9ca3af;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.95rem;
}

.nav a {
  color: #e5e7eb;
  font-weight: 500;
}

.nav a:hover {
  color: #a5f3fc;
  text-decoration: none;
}

.header-contact {
  text-align: right;
  font-size: 0.85rem;
  color: #9ca3af;
}

.header-contact a {
  color: #a5f3fc;
  font-weight: 500;
}

.header-contact a:hover {
  color: #f9fafb;
}

/* Mobile nav */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid #374151;
  color: #e5e7eb;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

@media (max-width: 840px) {
  .site-header-inner {
    flex-wrap: wrap;
  }

  .nav {
    display: none;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid #111827;
  }

  .nav.open {
    display: flex;
  }

  .header-contact {
    margin-left: auto;
  }

  .menu-toggle {
    display: inline-block;
  }
}

/* --------- Hero --------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #f9fafb;
  padding: 3.5rem 0 3rem;

  /* background image + dark overlay */
  background-image:
    linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.65)),
    url("assets/hero-andrews-law.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* simple parallax-like feel on desktop */
  background-attachment: fixed;
}

/* Turn off background-attachment: fixed on mobile (iOS hates it) */
@media (max-width: 900px) {
  .hero {
    background-attachment: scroll;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr);
  gap: 3rem;
  align-items: center;
}

.hero-kicker {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5f3fc;
  margin-bottom: 0.8rem;
}

.hero h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}

.hero-lede {
  font-size: 1rem;
  max-width: 35rem;
  color: #e5e7eb;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.8rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #ecfeff;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #115e59, #0d9488);
  text-decoration: none;
}

.btn-outline {
  border-color: #38bdf8;
  color: #e0f2fe;
  background: transparent;
}

.btn-outline:hover {
  background-color: rgba(8, 47, 73, 0.75);
  text-decoration: none;
}

.hero-panel {
  border-radius: 1.25rem;
  padding: 1.4rem 1.3rem;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.hero-panel h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.hero-panel p {
  font-size: 0.9rem;
  color: #e5e7eb;
  margin: 0 0 0.9rem;
}

.hero-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.hero-panel-list li + li {
  margin-top: 0.4rem;
}

@media (max-width: 840px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Real Estate page hero image */
.hero--real-estate {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.6)),
    url("assets/train-station2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Turn off background-attachment on smaller screens to avoid jitter */
@media (max-width: 900px) {
  .hero--real-estate {
    background-attachment: scroll;
  }
}
/* Estate planning page hero image */
.hero--estate-planning {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.6)),
    url("assets/old-agecroft.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Turn off background-attachment on smaller screens to avoid jitter */
@media (max-width: 900px) {
  .hero--estate-planning {
    background-attachment: scroll;
  }
}
/* Business Law page hero image */
.hero--business-law {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.6)),
    url("assets/contract.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Turn off background-attachment on smaller screens to avoid jitter */
@media (max-width: 900px) {
  .hero--business-law {
    background-attachment: scroll;
  }
}
/* About page hero image */
.hero--about {
  background-image:
    linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.6)),
    url("assets/courtroom.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Turn off background-attachment on smaller screens to avoid jitter */
@media (max-width: 900px) {
  .hero--about {
    background-attachment: scroll;
  }
}

/* --------- Sections --------- */
.section {
  padding: 3rem 0;
}

.section-header {
  margin-bottom: 1.75rem;
}

.section-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.4rem;
}

.section-title {
  font-size: 1.5rem;
  margin: 0 0 0.4rem;
}

.section-intro {
  max-width: 40rem;
  font-size: 0.98rem;
  color: #4b5563;
}

.image-strip {
  position: relative;
  padding: 4rem 0;
  color: #f9fafb;
  text-align: left;

/* Tighten vertical spacing between specific sections */
.section--tight-top {
  padding-top: 0.75rem;
}

.section--tight-bottom {
  padding-bottom: 0.75rem;
}

  background-image:
    linear-gradient(135deg, rgba(15,23,42,0.88), rgba(15,23,42,0.6)),
    url("assets/old-plat.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.image-strip h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.image-strip p {
  max-width: 40rem;
  font-size: 0.98rem;
}

/* Disable parallax on small screens */
@media (max-width: 900px) {
  .image-strip {
    background-attachment: scroll;
  }
}

/* --------- Practice Areas --------- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

@media (max-width: 960px) {
  .practice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .practice-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.practice-card {
  background-color: #ffffff;
  border-radius: 0.9rem;
  padding: 1.25rem 1.2rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.practice-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.practice-card p {
  margin: 0;
  font-size: 0.92rem;
  color: #4b5563;
}

.practice-card ul {
  margin: 0.3rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: #4b5563;
}

<section class="image-strip">
  <div class="wrapper">
    <div class="section-kicker">Property, Legacy, Business</div>
    <h2>Legal Decisions That Touch Every Part of Your Life</h2>
    <p>
      A quiet-title case over family land. A dispute between business partners. A question about who will
      inherit the house. These are legal problems, but they are also practical problems that affect your
      time, stress, and relationships. Andrews Law PLC helps you see how your real estate, estate plan,
      and business decisions interact so you can make informed choices.
    </p>
    <div class="hero-actions" style="margin-top:1.2rem;">
      <a href="contact.html" class="btn btn-primary">Talk with Andrews Law</a>
      <a href="real-estate.html" class="btn btn-outline">Real estate issues →</a>
    </div>
  </div>
</section>

/* --------- Two-Column Content --------- */
.twocol {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.8fr);
  gap: 2.2rem;
  align-items: flex-start;
}

@media (max-width: 840px) {
  .twocol {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card {
  background-color: #ffffff;
  border-radius: 0.9rem;
  border: 1px solid #e5e7eb;
  padding: 1.3rem 1.2rem;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.04);
}

/* --------- Callout / CTA --------- */
.cta-strip {
  background: radial-gradient(circle at top left, #0f766e, #022c22);
  color: #ecfdf5;
  padding: 2rem 0;
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cta-inner p {
  margin: 0;
  max-width: 32rem;
  font-size: 0.98rem;
}

/* --------- Lists & Typography --------- */
h1, h2, h3, h4 {
  color: #111827;  /* dark slate for normal sections */
}

p {
  margin: 0 0 0.9rem;
}

ul {
  margin: 0 0 0.9rem 1.25rem;
}

/* --------- Contact Form --------- */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr);
  gap: 2.2rem;
}

@media (max-width: 840px) {
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.form-field {
  margin-bottom: 0.9rem;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  padding: 0.55rem 0.65rem;
  font-size: 0.92rem;
  font-family: inherit;
}

.form-field textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-note {
  font-size: 0.8rem;
  color: #6b7280;
}

/* --------- Footer --------- */
.site-footer {
  background-color: #020617;
  color: #9ca3af;
  padding: 2rem 0 1.5rem;
  margin-top: 2rem;
  font-size: 0.82rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.3fr 2fr 2fr;
  gap: 1.8rem;
}

.footer-col h4 {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.footer-col p, .footer-col ul {
  margin: 0;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col li + li {
  margin-top: 0.25rem;
}

.footer-col a {
  color: #9ca3af;
}

.footer-col a:hover {
  color: #e5e7eb;
}

.footer-bottom {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid #111827;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 840px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Utility */
.text-sm {
  font-size: 0.85rem;
}

.text-muted {
  color: #6b7280;
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  border: 1px solid #0ea5e9;
  color: #0369a1;
  background-color: #e0f2fe;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Hero text colors on dark/photo backgrounds */
.hero {
  color: #e5e7eb; /* default body text inside hero */
}

/* Hero headings on dark/photo backgrounds */
.hero h1,
.hero h2,
.hero h3 {
  color: #fef9c3;  /* warm, pale gold */
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.85); /* stronger glow */
}

/* Slightly softer body text in hero */
.hero .hero-lede,
.hero .hero-panel,
.hero .hero-panel p,
.hero .hero-panel li {
  color: #e5e7eb;
}

/* Kicker line at top of hero (small uppercase text) */
.hero .hero-kicker {
  color: #22d3ee; /* brighter teal accent */
}

/* Links in hero that are NOT buttons */
.hero a:not(.btn) {
  color: #fef9c3;  /* warm pale gold, very visible */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  font-weight: 600;
}

.hero a:not(.btn):hover {
  color: #fde047;  /* slightly brighter on hover */
}

/* Generic cards (e.g., contact info block on About page) */
.card {
  background-color: #ffffff;
  color: #111827;               /* dark text */
  border: 1px solid #e5e7eb;
}

/* Ensure headings and body text inside cards are dark */
.card h2,
.card h3,
.card h4,
.card p,
.card li,
.card .text-sm {
  color: #111827;
}

/* Slightly softer muted text inside cards, if you use it */
.card .text-muted {
  color: #4b5563;
}

/* Links inside cards */
.card a {
  color: #0f766e;               /* or your accent color */
  text-decoration: none;
}

.card a:hover {
  color: #115e59;
  text-decoration: underline;
}

/* Final overrides: contact card links on light backgrounds */
.card a,
.card p a {
  color: #0f172a;       /* dark slate */
  font-weight: 600;
  text-decoration: none;
}

.card a:hover,
.card p a:hover {
  color: #0f766e;       /* your teal accent */
  text-decoration: underline;
}

/* Contact info block background */
.contact-card {
  background-color: #d9f9f9;  /* light teal */
}

/* Make sure text is dark enough on that light background */
.contact-card,
.contact-card h2,
.contact-card h3,
.contact-card p,
.contact-card li {
  color: #111827;
}