:root {
      --ink: #17201b;
      --muted: #637169;
      --brand: #fd5a02;
      --brand-dark: #dc4d00;
      --cream: #f7f7f2;
      --card: #ffffff;
      --line: #e7ebe6;
      --dark: #17201b;
      --shadow: 0 24px 70px rgba(23, 32, 27, .10);
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #fff;
      -webkit-font-smoothing: antialiased;
    }

    a { text-decoration: none; }
    .text-muted-custom { color: var(--muted); }


    .site-logo {
        width: 190px;
        height: auto;
        display: block;
    }

    @media (max-width: 767.98px) {
        .site-logo {
            width: 155px;
        }
    }

    .navbar {
      transition: all .25s ease;
      padding: 1rem 0;
    }
    .navbar.scrolled {
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 28px rgba(23,32,27,.07);
      padding: .7rem 0;
    }

    .brand-mark {
      width: 42px; height: 42px;
      display: grid; place-items: center;
      background: var(--brand);
      border-radius: 14px;
      transform: rotate(-5deg);
      box-shadow: inset 0 -4px 0 rgba(0,0,0,.05);
    }
    .brand-mark i { transform: rotate(5deg); font-size: 1.35rem; }
    .brand-name { font-weight: 900;  font-size: 1.3rem; }
    .brand-name span { color: var(--brand-dark); }

    .btn-brand {
      background: var(--ink);
      color: #fff;
      border: 0;
      font-weight: 800;
      border-radius: 999px;
      padding: .9rem 1.35rem;
      box-shadow: 0 12px 30px rgba(23,32,27,.16);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-brand:hover {
      color: #fff;
      background: #0f1512;
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(23,32,27,.22);
    }
    .btn-lime {
      background: var(--brand);
      color: var(--ink);
      border: 0;
      font-weight: 900;
      border-radius: 999px;
      padding: .95rem 1.4rem;
    }
    .btn-lime:hover { background: #8cdb57; color: var(--ink); }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 9.5rem 0 5.5rem;
      background:
        radial-gradient(circle at 86% 15%, rgba(228, 165, 106, 0.32), transparent 30%),
        radial-gradient(circle at 0% 50%, rgba(158,228,106,.12), transparent 35%),
        linear-gradient(180deg, #fbfcf8 0%, #ffffff 100%);
    }
    .hero::after {
      content: "";
      position: absolute;
      width: 360px; height: 360px;
      border: 1px solid rgba(23,32,27,.07);
      border-radius: 50%;
      right: -170px; top: 160px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      padding: .48rem .8rem;
      border: 1px solid #dde4dc;
      background: rgba(255,255,255,.75);
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 800;
      color: #3d4b42;
      margin-bottom: 1.2rem;
    }
    .eyebrow-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brand-dark);
      box-shadow: 0 0 0 5px rgba(118,200,70,.15);
    }

    .hero h1 {
      font-size: clamp(3rem, 6.3vw, 6.4rem);
      line-height: .92; 
      font-weight: 950;
      max-width: 850px;
      margin: 0;
    }
    .hero h1 .accent {
      position: relative;
      display: inline-block;
      z-index: 1;
    }
    .hero h1 .accent::after {
      content:"";
      position:absolute;
      left:-1%;
      right:-1%;
      bottom: .08em;
      height: .25em;
      background: var(--brand);
      border-radius: 99px;
      z-index:-1;
      transform: rotate(-1.5deg);
    }

    .hero-copy {
      max-width: 650px;
      font-size: clamp(1.05rem, 1.7vw, 1.3rem);
      line-height: 1.65;
      color: var(--muted);
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      font-size: .91rem;
      color: #46534b;
      font-weight: 700;
    }
    .hero-proof span { display: inline-flex; align-items: center; gap: .42rem; }
    .hero-proof i { color: var(--brand-dark); }

    .visual-shell {
      position: relative;
      min-height: 540px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .visual-card {
      width: min(100%, 520px);
      border: 1px solid rgba(23,32,27,.08);
      border-radius: 38px;
      background: #eaf5e4;
      box-shadow: var(--shadow);
      padding: 1.2rem;
      transform: rotate(1.2deg);
      position: relative;
    }
    .visual-card svg {
      width: 100%;
      height: auto;
      border-radius: 28px;
      display: block;
      background: #d9efcd;
    }
    .float-card {
      position: absolute;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(23,32,27,.08);
      border-radius: 18px;
      padding: .95rem 1rem;
      box-shadow: 0 16px 36px rgba(23,32,27,.12);
      font-weight: 800;
      font-size: .9rem;
    }
    .float-card i { color: var(--brand-dark); }
    .float-1 { top: 11%; left: -2%; }
    .float-2 { bottom: 12%; right: -2%; }

    .trust-strip {
      background: var(--dark);
      color: #fff;
      padding: 1.15rem 0;
    }
    .trust-strip .item {
      opacity: .96;
      font-weight: 750;
      display: flex;
      align-items: center;
      gap: .55rem;
      white-space: nowrap;
    }
    .trust-strip i { color: var(--brand); }

    section { padding: 6.5rem 0; }
    .section-kicker {
      text-transform: uppercase; 
      font-size: .76rem;
      font-weight: 900;
      color: #5d6a62;
      margin-bottom: .8rem;
    }
    .section-title {
      font-size: clamp(2.2rem, 4vw, 4.2rem);
      line-height: 1.02; 
      font-weight: 950;
      margin-bottom: 1rem;
    }
    .section-copy {
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.7;
    }

    .step-card, .benefit-card, .city-card {
      height: 100%;
      border: 1px solid var(--line);
      border-radius: 26px;
      background: var(--card);
      padding: 1.7rem;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .step-card:hover, .benefit-card:hover, .city-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 44px rgba(23,32,27,.08);
      border-color: #d8dfd7;
    }
    .num {
      width: 48px; height: 48px;
      display: grid; place-items: center;
      border-radius: 15px;
      background: var(--brand);
      font-weight: 950;
      margin-bottom: 1.3rem;
    }
    .icon-chip {
      width: 52px; height: 52px;
      display: grid; place-items: center;
      border-radius: 16px;
      background: #eef6ea;
      font-size: 1.35rem;
      margin-bottom: 1.25rem;
    }

    .soft-bg { background: var(--cream); }

    .feature-panel {
      border-radius: 34px;
      overflow: hidden;
      background: var(--dark);
      color: #fff;
      min-height: 560px;
      box-shadow: var(--shadow);
    }
    .feature-panel .copy { padding: clamp(2rem, 5vw, 4.8rem); }
    .feature-panel .visual {
      min-height: 440px;
      background:
        radial-gradient(circle at 70% 30%, rgba(158,228,106,.42), transparent 24%),
        linear-gradient(155deg, #314639 0%, #1d2822 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      position: relative;
      overflow:hidden;
    }
    .feature-panel .visual::before {
      content:"";
      width: 330px; height: 330px;
      border: 42px solid rgba(158,228,106,.17);
      border-radius:50%;
      position:absolute;
    }

    .mini-stat {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .mini-stat strong { font-size: 1.5rem; }
    .mini-stat small { color: rgba(255,255,255,.65); }

    .testimonial {
      border: 1px solid var(--line);
      border-radius: 28px;
      padding: 2rem;
      background:#fff;
      height:100%;
    }
    .stars { color: #e8a420;  }

    .service-area {
      background: #edf7e7;
      border-radius: 34px;
      padding: clamp(2rem,5vw,4rem);
    }
    .city-pill {
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border:1px solid #d2dfce;
      background:rgba(255,255,255,.72);
      border-radius:999px;
      padding:.65rem .95rem;
      font-weight:800;
      margin:.25rem;
    }

    .faq .accordion-item {
      border: 1px solid var(--line);
      border-radius: 18px !important;
      overflow: hidden;
      margin-bottom: .9rem;
      background: #fff;
    }
    .faq .accordion-button {
      font-weight: 850;
      padding: 1.25rem 1.3rem;
      box-shadow:none !important;
      background:#fff;
    }
    .faq .accordion-button:not(.collapsed) {
      color: var(--ink);
      background: #f7fbf5;
    }
    .faq .accordion-body { color: var(--muted); line-height: 1.7; }

    .contact-wrap {
      background: var(--dark);
      color:#fff;
      border-radius: 38px;
      overflow:hidden;
    }
    .contact-copy { padding: clamp(2rem,5vw,4rem); }
    .contact-form-wrap {
      background:#fff;
      color:var(--ink);
      padding: clamp(1.5rem,4vw,3rem);
      margin: 1rem;
      border-radius: 30px;
    }
    .form-control, .form-select {
      min-height: 52px;
      border-radius: 14px;
      border-color:#dde3dd;
      padding: .8rem .95rem;
    }
    .form-control:focus, .form-select:focus {
      border-color: #a9d78e;
      box-shadow: 0 0 0 .25rem rgba(158,228,106,.17);
    }

    .sticky-mobile-cta {
      display:none;
      position:fixed;
      bottom:12px;
      left:12px;
      right:12px;
      z-index:1050;
      box-shadow: 0 14px 36px rgba(0,0,0,.22);
    }

    footer {
      padding: 2.3rem 0;
      border-top: 1px solid var(--line);
      color: #6c7871;
      font-size: .92rem;
    }

    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: all .65s ease;
    }
    .reveal.show {
      opacity: 1;
      transform: translateY(0);
    }

    @media (max-width: 991.98px) {
      .hero { padding-top: 8rem; } 
      .visual-shell { min-height: auto; margin-top: 2.5rem; }
      .float-1 { left: 1%; }
      .float-2 { right: 1%; }
      section { padding: 4.5rem 0; }
    }

    @media (max-width: 767.98px) {
      .hero { padding: 7rem 0 4rem; }
      .hero h1 { font-size: clamp(3.2rem, 15vw, 5rem);   }
      .hero-copy { font-size: 1.04rem; }
      .visual-card { border-radius: 28px; }
      .float-card { font-size: .8rem; padding: .75rem .8rem; }
      .sticky-mobile-cta { display:block; }
      body { padding-bottom: 78px; }
    }