/*
  tax_lawyer_match_v2.css
  Gold/charcoal legal theme for /tax-lawyer-match/v2/
  Distinct from the teal/orange palette used on other pages.
  irs_estimator.css is also loaded for card internals.

  Palette:
    Deep charcoal bg   #0d1117
    Mid charcoal       #10161f
    Card bg            #191f2b
    Gold CTA           #c9a84c
    Gold hover         #b8943f
    Steel blue accent  #4a90c4   (secondary — checkmarks, links)
    Light text         #e2e8f0
    Muted text         #7a8aa0
*/


/* ═══════════════════════════════════════════════════════════════════════════
   1. VARIABLES & RESET
════════════════════════════════════════════════════════════════════════════ */

:root {
  --tlm-deep:       #0d1117;
  --tlm-mid:        #10161f;
  --tlm-card:       #191f2b;
  --tlm-gold:       #c9a84c;
  --tlm-gold-h:     #b8943f;
  --tlm-gold-dim:   rgba(201,168,76,.15);
  --tlm-blue:       #4a90c4;
  --tlm-blue-dim:   rgba(74,144,196,.15);
  --tlm-white:      #ffffff;
  --tlm-text:       #e2e8f0;
  --tlm-muted:      #7a8aa0;
  --tlm-light:      #4d6a8a;
  --tlm-border:     rgba(255,255,255,.08);
  --tlm-border-mid: rgba(255,255,255,.13);

  --tlm-shadow-glow: 0 8px 40px rgba(201,168,76,.10), 0 2px 8px rgba(0,0,0,.4);
  --tlm-shadow-card: 0 4px 24px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.2);

  --tlm-radius-sm:  6px;
  --tlm-radius-md:  12px;
  --tlm-radius-lg:  20px;
  --tlm-radius-pill:999px;

  --tlm-section-py: 64px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body.tlm-body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--tlm-text);
  background: var(--tlm-deep);
  -webkit-font-smoothing: antialiased;
}

img   { max-width: 100%; display: block; }
a     { color: var(--tlm-gold); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   2. TYPOGRAPHY
════════════════════════════════════════════════════════════════════════════ */

.tlm-body h1 { font-size: clamp(1.65rem, 5vw, 2.6rem); font-weight: 900; line-height: 1.15; color: var(--tlm-white); }
.tlm-body h2 { font-size: clamp(1.3rem,  4vw, 2rem);   font-weight: 800; line-height: 1.2;  color: var(--tlm-white); }
.tlm-body h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.tlm-body h4 { font-size: .95rem;  font-weight: 700; line-height: 1.35; }
.tlm-body p  { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   3. LAYOUT
════════════════════════════════════════════════════════════════════════════ */

.tlm-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. NAV
════════════════════════════════════════════════════════════════════════════ */

.tlm-nav {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  padding: 18px 0;
  /* No border-bottom — avoids the line crossing the hero badge */
}

.tlm-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tlm-logo-link { display: flex; align-items: center; text-decoration: none; }
.tlm-logo      { height: 72px; width: auto; }

.tlm-nav-phone {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--tlm-gold);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.tlm-nav-phone:hover { text-decoration: underline; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. HERO
════════════════════════════════════════════════════════════════════════════ */

.tlm-above-fold {
  background: none;
}

.tlm-hero {
  background:
    linear-gradient(160deg, rgba(5,10,18,.65) 0%, rgba(10,18,35,.72) 100%),
    url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1600&auto=format&q=80')
    center top / cover no-repeat;
  padding: 88px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tlm-hero::before { display: none; }

.tlm-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tlm-h1 { color: var(--tlm-white); }

.tlm-hero-sub {
  font-size: 1rem;
  color: var(--tlm-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

.tlm-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tlm-gold);
  color: #0d1117;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 16px 38px;
  border-radius: var(--tlm-radius-pill);
  box-shadow: 0 4px 20px rgba(201,168,76,.45);
  text-decoration: none;
  transition: background .16s, box-shadow .16s, transform .1s;
  margin-top: 4px;
  letter-spacing: .01em;
}
.tlm-hero-cta:hover {
  background: var(--tlm-gold-h);
  box-shadow: 0 6px 28px rgba(201,168,76,.55);
  transform: translateY(-1px);
  text-decoration: none;
  color: #0d1117;
}

.tlm-hero-badge {
  display: inline-block;
  background: rgba(201,168,76,.13);
  color: var(--tlm-gold);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--tlm-radius-pill);
  border: 1px solid rgba(201,168,76,.3);
}

.tlm-hero-trust-text {
  font-size: .82rem;
  color: var(--tlm-light);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. ESTIMATOR SECTION
════════════════════════════════════════════════════════════════════════════ */

.tlm-estimator-section {
  background: #0e131c;
  padding: 0 0 52px;
  border-top: none;
}

/* Pull card up into the hero */
.tlm-estimator-section .est-card-wrap {
  margin-top: -48px;
  position: relative;
  z-index: 10;
}

.tlm-estimator-section .est-card {
  box-shadow: 0 24px 64px rgba(0,0,0,.58), 0 4px 16px rgba(0,0,0,.3);
  border-color: rgba(255,255,255,.07);
}

/* Gold progress bar */
.tlm-estimator-section .est-progress-fill {
  background: linear-gradient(90deg, #c9a84c, #e0c06a);
}

/* Gold slider thumb */
.tlm-estimator-section .est-slider::-webkit-slider-thumb {
  background: var(--tlm-gold);
}
.tlm-estimator-section .est-slider::-moz-range-thumb {
  background: var(--tlm-gold);
}

/* Gold selected issue card */
.tlm-estimator-section .est-issue-card.selected {
  border-color: var(--tlm-gold);
  background: var(--tlm-gold);
  color: #0d1117;
}

/* Gold continue + submit buttons */
.tlm-estimator-section .est-btn-cont {
  background: var(--tlm-gold);
  color: #0d1117;
}
.tlm-estimator-section .est-btn-cont:hover:not(:disabled) {
  background: var(--tlm-gold-h);
}

/* Step 1: Back is hidden — Continue fills full width and is centered */
.tlm-estimator-section .est-footer.tlm-step-first .est-btn-back {
  display: none;
}
.tlm-estimator-section .est-footer.tlm-step-first .est-btn-cont {
  flex: none;
  width: 100%;
}

/* Steps 2+: Back is visible — normal flex, Continue takes remaining right space */
.tlm-estimator-section .est-footer:not(.tlm-step-first) .est-btn-back {
  position: static;
  transform: none;
}
.tlm-estimator-section .est-footer:not(.tlm-step-first) .est-btn-cont {
  flex: 1;
  width: auto;
}

.tlm-submit-btn {
  background: var(--tlm-gold) !important;
  color: #0d1117 !important;
}
.tlm-submit-btn:hover:not(:disabled) {
  background: var(--tlm-gold-h) !important;
}

/* Balance slider range labels */
.tlm-slider-range {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: .7rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: .03em;
}

/* Trust reassurance row */
.tlm-form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  margin: 12px 0 10px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--tlm-gold);
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. BADGE STRIP
════════════════════════════════════════════════════════════════════════════ */

.tlm-badge-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  border-radius: 0 0 12px 12px;
}

.tlm-badge-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.tlm-badge-lg { height: 52px; width: auto; object-fit: contain; flex-shrink: 0; opacity: .9; max-width: 46%; }
.tlm-badge-sm { height: 30px; width: auto; object-fit: contain; flex-shrink: 0; opacity: .8; max-width: 46%; }


/* ═══════════════════════════════════════════════════════════════════════════
   8. TRUST SECTION
════════════════════════════════════════════════════════════════════════════ */

.tlm-trust-section {
  background: var(--tlm-mid);
  border-top: 1px solid var(--tlm-border);
  border-bottom: 1px solid var(--tlm-border);
  padding: 32px 0;
}

.tlm-trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin-bottom: 22px;
}

.tlm-trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--tlm-text);
}
.tlm-trust-icon { font-size: 1.1rem; line-height: 1; }

.tlm-trust-bullets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
}
.tlm-trust-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tlm-text);
}
.tlm-check { color: var(--tlm-gold); font-size: 1rem; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   9. SECTION BASE
════════════════════════════════════════════════════════════════════════════ */

.tlm-section {
  padding: var(--tlm-section-py) 0;
  background: var(--tlm-deep);
}
.tlm-section.tlm-alt { background: var(--tlm-mid); }

.tlm-section-title {
  text-align: center;
  color: var(--tlm-white);
  margin-bottom: 12px;
}
.tlm-section-sub {
  text-align: center;
  color: var(--tlm-muted);
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. HELP CARDS GRID
════════════════════════════════════════════════════════════════════════════ */

.tlm-help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tlm-card {
  background: var(--tlm-card);
  border: 1px solid var(--tlm-border);
  border-radius: var(--tlm-radius-md);
  padding: 22px 20px;
  transition: border-color .18s, box-shadow .18s;
}
.tlm-card:hover {
  border-color: rgba(201,168,76,.35);
  box-shadow: 0 4px 20px rgba(201,168,76,.08);
}
.tlm-card-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 10px;
}
.tlm-card h3 {
  color: var(--tlm-gold);
  margin-bottom: 8px;
  font-size: 1rem;
}
.tlm-card p {
  font-size: .85rem;
  color: var(--tlm-muted);
  line-height: 1.65;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. PROCESS STEPS
════════════════════════════════════════════════════════════════════════════ */

.tlm-process-steps {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 40px;
}
.tlm-process-step {
  flex: 1;
  text-align: center;
}
.tlm-step-num {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #c9a84c, #e0c06a);
  color: #0d1117;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 900;
  margin: 0 auto 12px;
  box-shadow: 0 4px 16px rgba(201,168,76,.35);
}
.tlm-process-step h4 {
  color: var(--tlm-white);
  font-size: .93rem;
  margin-bottom: 6px;
}
.tlm-process-step p {
  font-size: .8rem;
  color: var(--tlm-muted);
  line-height: 1.65;
}
.tlm-process-arrow {
  color: rgba(255,255,255,.2);
  font-size: 1.6rem;
  font-weight: 300;
  padding-top: 14px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. FAQ
════════════════════════════════════════════════════════════════════════════ */

.tlm-faq-section .tlm-section-title { margin-bottom: 32px; }

.tlm-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tlm-faq-item {
  background: var(--tlm-card);
  border: 1px solid var(--tlm-border);
  border-radius: var(--tlm-radius-sm);
  overflow: hidden;
  transition: border-color .18s;
}
.tlm-faq-item[open] {
  border-color: rgba(201,168,76,.3);
}
.tlm-faq-item summary {
  padding: 16px 20px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--tlm-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.tlm-faq-item summary::-webkit-details-marker { display: none; }
.tlm-faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--tlm-gold);
  flex-shrink: 0;
  transition: transform .2s;
}
.tlm-faq-item[open] summary::after { transform: rotate(45deg); }

.tlm-faq-answer { padding: 0 20px 16px; }
.tlm-faq-answer p {
  font-size: .88rem;
  color: var(--tlm-muted);
  line-height: 1.75;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. BOTTOM CTA
════════════════════════════════════════════════════════════════════════════ */

.tlm-cta-section { background: var(--tlm-deep); }

.tlm-cta-box {
  background: linear-gradient(135deg, #111826 0%, #0c1220 100%);
  border: 1px solid rgba(201,168,76,.2);
  border-radius: var(--tlm-radius-lg);
  padding: 52px 40px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(201,168,76,.07), 0 2px 8px rgba(0,0,0,.3);
}
.tlm-cta-box h2 { color: var(--tlm-white); margin-bottom: 14px; }
.tlm-cta-box p {
  color: var(--tlm-muted);
  font-size: .95rem;
  max-width: 480px;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.tlm-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.tlm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tlm-gold);
  color: #0d1117;
  font-size: .97rem;
  font-weight: 800;
  padding: 14px 30px;
  border-radius: var(--tlm-radius-pill);
  box-shadow: 0 3px 14px rgba(201,168,76,.45);
  text-decoration: none;
  transition: background .16s, box-shadow .16s;
}
.tlm-btn-primary:hover {
  background: var(--tlm-gold-h);
  color: #0d1117;
  text-decoration: none;
  box-shadow: 0 5px 20px rgba(201,168,76,.55);
}

.tlm-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(201,168,76,.45);
  color: var(--tlm-gold);
  font-size: .97rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--tlm-radius-pill);
  text-decoration: none;
  transition: border-color .16s, background .16s;
}
.tlm-btn-outline:hover {
  border-color: var(--tlm-gold);
  background: var(--tlm-gold-dim);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. FOOTER
════════════════════════════════════════════════════════════════════════════ */

.tlm-footer {
  background: #070a10;
  padding: 36px 0 28px;
  border-top: 1px solid var(--tlm-border);
}
.tlm-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.tlm-footer-logo {
  height: 38px;
  width: auto;
  opacity: .5;
}
.tlm-footer-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: .8rem;
}
.tlm-footer-links a {
  color: rgba(255,255,255,.38);
  text-decoration: underline;
}
.tlm-footer-links a:hover { color: rgba(255,255,255,.65); }
.tlm-footer-links span    { color: rgba(255,255,255,.16); }

.tlm-footer-disclaimer {
  font-size: .75rem;
  color: rgba(255,255,255,.32);
  max-width: 800px;
  line-height: 1.65;
}
.tlm-footer-disclaimer strong { color: rgba(255,255,255,.5); }
.tlm-footer-copy {
  font-size: .74rem;
  color: rgba(255,255,255,.2);
}


/* ═══════════════════════════════════════════════════════════════════════════
   15. THANK-YOU PAGE
════════════════════════════════════════════════════════════════════════════ */

.tlm-ty-section {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding: 80px 0 60px;
}
.tlm-ty-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.tlm-ty-icon { font-size: 3.2rem; margin-bottom: 16px; }
.tlm-ty-h1   { color: var(--tlm-white); margin-bottom: 18px; }
.tlm-ty-lead {
  font-size: .97rem;
  color: var(--tlm-muted);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.75;
}
.tlm-ty-steps {
  background: var(--tlm-card);
  border: 1px solid var(--tlm-border);
  border-radius: var(--tlm-radius-md);
  padding: 28px;
  margin-bottom: 28px;
  text-align: left;
}
.tlm-ty-steps h2 { font-size: 1.1rem; color: var(--tlm-gold); margin-bottom: 14px; }
.tlm-ty-steps ol {
  list-style: decimal;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tlm-ty-steps ol li { font-size: .9rem; color: var(--tlm-muted); line-height: 1.6; }
.tlm-ty-call   { font-size: .93rem; color: var(--tlm-muted); }
.tlm-ty-phone  { color: var(--tlm-gold); font-weight: 800; font-size: 1.1rem; margin-left: 4px; }


/* ═══════════════════════════════════════════════════════════════════════════
   16. MOBILE STICKY CTA
════════════════════════════════════════════════════════════════════════════ */

.tlm-mobile-sticky {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  padding: 10px 16px;
  background: rgba(10,14,22,.97);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(201,168,76,.2);
  gap: 10px;
  box-shadow: 0 -3px 20px rgba(0,0,0,.45);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  transform: translateY(100%);
}
.tlm-mobile-sticky.tlm-sticky-visible { transform: translateY(0); }

.tlm-sticky-primary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tlm-gold);
  color: #0d1117;
  font-size: .88rem;
  font-weight: 700;
  padding: 11px 16px;
  border-radius: var(--tlm-radius-sm);
  text-decoration: none;
  text-align: center;
}
.tlm-sticky-call {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(201,168,76,.1);
  color: var(--tlm-gold);
  font-size: .88rem;
  font-weight: 700;
  padding: 11px 14px;
  border-radius: var(--tlm-radius-sm);
  text-decoration: none;
  border: 1px solid rgba(201,168,76,.28);
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. RESPONSIVE — TABLET (600px+)
════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 600px) {
  .tlm-logo { height: 80px; }
  .tlm-trust-pills { gap: 12px 40px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE — DESKTOP (900px+)
════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {
  /* Single background photo covers hero + estimator on desktop */
  .tlm-above-fold {
    background:
      linear-gradient(180deg, rgba(5,10,18,.62) 0%, rgba(8,16,30,.82) 100%),
      url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1600&auto=format&q=80')
      center top / cover no-repeat;
  }

  /* Hero and estimator sit transparently on the wrapper photo */
  .tlm-hero {
    background: none;
    padding: 110px 0 80px;  /* generous bottom padding keeps CTA clear of the card */
  }

  .tlm-estimator-section {
    background: transparent;
    padding: 0 0 80px;
    border-top: none;
  }

  .tlm-estimator-section .est-card-wrap {
    margin-top: -20px;  /* slight overlap with the hero bg — card doesn't touch the CTA */
  }

  .tlm-help-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   19. MOBILE — max 599px
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
  body.tlm-body { padding-bottom: 68px; }

  .tlm-logo { height: 58px; }
  .tlm-nav-phone { font-size: .88rem; }

  .tlm-hero { padding: 70px 0 64px; }
  .tlm-hero-inner { gap: 10px; }
  .tlm-hero-sub { display: none; }
  .tlm-hero-trust-text { display: none; }
  .tlm-hero-cta { font-size: .97rem; padding: 14px 28px; }

  .tlm-estimator-section { padding: 0 0 44px; }
  .tlm-estimator-section .est-card-wrap { margin-top: -36px; }

  .tlm-badge-strip { padding: 10px 12px 14px; gap: 8px; }
  .tlm-badge-lg { height: 40px; }
  .tlm-badge-sm { height: 22px; }

  .tlm-help-grid { grid-template-columns: 1fr; }

  .tlm-process-steps  { flex-direction: column; align-items: center; }
  .tlm-process-arrow  { transform: rotate(90deg); padding: 0; }

  .tlm-cta-box { padding: 36px 20px; }

  .tlm-mobile-sticky { display: flex; }
}