:root{
      --tnm-burgundy:#6b0f10;
      --tnm-gold:#d4a23a;
      --tnm-ink:#1e1f24;
      --tnm-slate:#2c2f38;
      --tnm-soft:#f3f4f6;
      --tnm-card:#ffffff;
      --tnm-shadow: 0 10px 25px rgba(0,0,0,.15);
      --tnm-shadow-soft: 0 10px 20px rgba(0,0,0,.10);
      --tnm-radius: 18px;
    }

    body{
      color: var(--tnm-ink);
      background: #fff;
    }

    /* ===== Top bar (logo + phone + CTA) ===== */
    .tnm-topbar{
      background: radial-gradient(1200px 400px at 20% 20%, rgba(212,162,58,.35), transparent 60%),
                  linear-gradient(180deg, #7a0d0f 0%, #4a0b0c 100%);
      color:#fff;
      border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .tnm-brand{
      display:flex; align-items:center; gap:.75rem;
    }
    .tnm-brand .brand-mark{
      width:56px; height:38px;
      border-radius: 8px;
      background: rgba(255,255,255,.12);
      display:grid; place-items:center;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
      font-weight:800;
      letter-spacing:.08em;
    }
    .tnm-brand .brand-name{
      font-size: clamp(1.1rem, 2vw, 1.75rem);
      font-weight: 700;
      line-height:1.1;
    }
    .tnm-brand .brand-sub{
      font-size:.85rem;
      opacity:.85;
      margin-top:2px;
    }

    .tnm-top-actions{
      display:flex; align-items:center; justify-content:end; gap:1rem;
    }

    .tnm-phone{
      display:flex; align-items:center; gap:.5rem;
      font-weight:700;
      font-size: clamp(1rem, 1.4vw, 1.3rem);
      white-space:nowrap;
    }
    .tnm-phone i{ color: var(--tnm-gold); }

    .btn-tnm{
      background: linear-gradient(180deg, #d7a745, #b8841f);
      color:#1b1408;
      font-weight:800;
      border:none;
      border-radius: 12px;
      padding: .65rem 1rem;
      box-shadow: 0 10px 18px rgba(0,0,0,.18);
    }
    .btn-tnm:hover{ filter: brightness(1.03); transform: translateY(-1px); }
    .btn-tnm:active{ transform: translateY(0px); }

    /* ===== Nav ===== */
    .tnm-nav{
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,.08);
      position: sticky;
      top: 0;
      z-index: 1020;
    }
    .navbar .nav-link{
      font-weight:700;
      color:#2b2e36;
      padding: .9rem .9rem;
    }
    .navbar .nav-link:hover{ color: var(--tnm-burgundy); }
    .navbar .nav-link.active{ color: var(--tnm-burgundy); }

    /* ===== Hero ===== */
    .tnm-hero{
      position: relative;
      overflow: hidden;
      background: #111;
      color:#fff;
      min-height: 460px;
    }

    /* Put YOUR hero background image here */
    .tnm-hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.10) 100%),
        url("assets/hero.jpg") center/cover no-repeat; /* <-- replace */
      transform: scale(1.02);
    }
    .tnm-hero::after{
      content:"";
      position:absolute; inset:-60px;
      background: radial-gradient(600px 240px at 18% 40%, rgba(212,162,58,.22), transparent 55%);
      pointer-events:none;
    }
    .tnm-hero .container{
      position: relative;
      padding-top: 2.25rem;
      padding-bottom: 2.25rem;
    }

    .hero-kicker{
      display:inline-flex;
      gap:.6rem;
      align-items:center;
      font-weight:800;
      letter-spacing:.02em;
      opacity:.95;
      margin-bottom:.6rem;
    }
    .hero-kicker .bolt{
      color: var(--tnm-gold);
      font-size: 1.05rem;
    }

    .hero-title{
      font-weight: 900;
      letter-spacing: -.02em;
      font-size: clamp(2.2rem, 4vw, 3.25rem);
      line-height: 1.02;
      margin-bottom: .75rem;
      text-shadow: 0 10px 25px rgba(0,0,0,.35);
    }
    .hero-title .gold{
      background: linear-gradient(180deg, #ffe3a2, #d1a13f);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-pricing{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin: 1rem 0 1rem;
    }
    .price-pill{
      display:flex;
      align-items:baseline;
      gap:.5rem;
      padding: .6rem .9rem;
      border-radius: 14px;
      background: rgba(0,0,0,.35);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
      backdrop-filter: blur(6px);
    }
    .price-pill small{ opacity:.9; font-weight:700; }
    .price-pill span{
      font-weight:900;
      color: #ffd889;
      font-size: 1.35rem;
      letter-spacing: .02em;
    }

    .hero-subline{
      font-weight:800;
      opacity:.95;
      margin-top:.5rem;
      font-size: 1.1rem;
    }
    .hero-note{
      opacity:.9;
      margin-top:.1rem;
    }

    /* Right-side hero image (people) placeholder */
    .hero-figure{
      width: 100%;
      max-width: 420px;
      aspect-ratio: 4 / 5;
      border-radius: 22px;
      background: rgba(255,255,255,.10);
      box-shadow: var(--tnm-shadow);
      border: 1px solid rgba(255,255,255,.16);
      overflow:hidden;
      position: relative;
    }
    .hero-figure img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
      filter: saturate(1.03) contrast(1.02);
    }
    .hero-figure .badge{
      position:absolute;
      left: 14px;
      top: 14px;
      background: rgba(0,0,0,.55) !important;
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(6px);
      font-weight:800;
      padding:.55rem .7rem;
      border-radius: 14px;
    }

    /* ===== Action cards row ===== */
    .tnm-action-card{
      border-radius: var(--tnm-radius);
      background: var(--tnm-card);
      box-shadow: var(--tnm-shadow-soft);
      border: 1px solid rgba(0,0,0,.08);
      overflow:hidden;
      height:100%;
    }
    .tnm-action-card .card-body{ padding: 1.3rem 1.3rem; }
    .tnm-action-card .card-title{
      font-weight:900;
      letter-spacing:-.01em;
    }
    .tnm-action-card .icon-wrap{
      width: 52px; height:52px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: linear-gradient(180deg, rgba(212,162,58,.22), rgba(107,15,16,.12));
      border: 1px solid rgba(0,0,0,.08);
      margin-right:.75rem;
      flex: 0 0 auto;
    }
    .tnm-action-card .icon-wrap i{
      font-size: 1.4rem;
      color: var(--tnm-burgundy);
    }

    .btn-ghost{
      border-radius: 12px;
      font-weight:800;
      border: 1px solid rgba(0,0,0,.14);
      background: #fff;
    }
    .btn-ghost:hover{ border-color: rgba(0,0,0,.22); }

    /* ===== Section title ===== */
    .section-title{
      text-align:center;
      font-weight: 900;
      letter-spacing:-.02em;
      font-size: clamp(1.75rem, 2.3vw, 2.4rem);
      margin: 2.2rem 0 1.4rem;
    }
    .section-rule{
      width: min(520px, 90%);
      height: 2px;
      margin: .75rem auto 0;
      background: linear-gradient(90deg, transparent, rgba(107,15,16,.55), transparent);
    }

    /* ===== Service tiles ===== */
    .service-tile{
      border-radius: var(--tnm-radius);
      border: 1px solid rgba(0,0,0,.08);
      box-shadow: var(--tnm-shadow-soft);
      background: #fff;
      overflow:hidden;
      height:100%;
    }
    .service-tile .tile-top{
      padding: 1.1rem 1.1rem 0;
      display:flex;
      gap:.85rem;
      align-items:flex-start;
    }
    .service-tile .tile-icon{
      width: 46px; height:46px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(107,15,16,.08);
      border: 1px solid rgba(107,15,16,.12);
      flex: 0 0 auto;
    }
    .service-tile .tile-icon i{
      font-size: 1.25rem;
      color: var(--tnm-burgundy);
    }
    .service-tile h5{
      margin:0;
      font-weight: 900;
      letter-spacing:-.01em;
    }
    .service-tile p{
      margin: .35rem 0 0;
      color: rgba(30,31,36,.78);
      font-weight: 600;
    }
    .service-tile .tile-actions{
      padding: .9rem 1.1rem 1.1rem;
      display:flex;
      gap:.6rem;
      flex-wrap:wrap;
    }

    /* ===== Footer ===== */
    .tnm-footer{
      margin-top: 2.7rem;
      background:
        radial-gradient(900px 260px at 30% 0%, rgba(212,162,58,.18), transparent 55%),
        linear-gradient(180deg, #1d1f28 0%, #14151c 100%);
      color: rgba(255,255,255,.88);
      padding: 2.2rem 0 1.2rem;
      border-top: 1px solid rgba(255,255,255,.10);
    }
    .tnm-footer h6{
      color:#fff;
      font-weight: 900;
      letter-spacing:.04em;
      margin-bottom: .75rem;
    }
    .footer-links a{
      display:block;
      color: rgba(255,255,255,.84);
      text-decoration:none;
      padding: .25rem 0;
      font-weight: 650;
    }
    .footer-links a:hover{ color: #fff; text-decoration: underline; }

    .footer-center{
      text-align:center;
    }
    .footer-center .big{
      font-weight: 900;
      font-size: clamp(1.5rem, 2vw, 2.1rem);
      color: #fff;
    }
    .footer-center .small{
      opacity:.9;
      font-weight:700;
    }

    .social-row{
      display:flex;
      gap:.55rem;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:.7rem;
    }
    .social-btn{
      width: 40px; height: 40px;
      border-radius: 12px;
      display:grid; place-items:center;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      color:#fff;
      text-decoration:none;
    }
    .social-btn:hover{ background: rgba(255,255,255,.13); }

    .copyright{
      margin-top: 1.4rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(255,255,255,.10);
      text-align:center;
      opacity:.85;
      font-weight:650;
      font-size: .95rem;
    }

    /* Minor tweaks */
    .rounded-xxl{ border-radius: 22px; }

    @media (max-width: 991.98px){
      .tnm-top-actions{ justify-content:start; }
      .hero-figure{ max-width: 520px; margin-top: 1rem; }
    }


/* ===== FOOTER (UPDATED WITH BACKGROUND IMAGE) ===== */
.tnm-footer--bg {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgb(20 21 28 / 30%) 0%, rgba(20, 21, 28, .97) 100%), url(../img/footer.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, .88);
    padding: 2.2rem 0 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

/* Optional: extra glow/texture overlay */


/* Keeps footer content above overlays */
.tnm-footer--bg .container{
  position: relative;
  z-index: 1;
}