:root{
      --green:#16a34a;--green-dark:#166534;--green-light:#dcfce7;--green-mid:#bbf7d0;
      --dark:#111827;--gray:#6b7280;--light-gray:#f3f4f6;
      --border:#e5e7eb;--white:#fff;
      --shadow:0 4px 24px rgba(22,163,74,.10);
      --radius:14px;--tr:.22s ease;
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

    /* ══ FLUID ROOT FONT SIZE ──
       Scales smoothly from small phones up through desktop.
       Large/TV-class viewports get an extra boost via media query below. */
    html{font-size:clamp(15px, 0.9vw + 12px, 19px)}

    body{font-family:'DM Sans',sans-serif;background:#f8fafb;color:var(--dark);overflow-x:hidden;font-size:1rem}
    .container{max-width:1400px;margin:0 auto;padding:0 24px;width:100%}
    a{color:inherit}

    /* ══ TOPBAR (mirrors header.php) ══ */
    .topbar{background:var(--green);color:#fff;font-size:.8125rem;padding:7px 0;z-index:102}
    .topbar-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
    .topbar-right a{color:#fff;text-decoration:none;opacity:.9}
    .topbar-right a:hover{opacity:1}

    /* ══ HEADER (mirrors header.php) ══ */
    .header{background:var(--white);border-bottom:1px solid var(--border);padding:16px 0;
      position:sticky;top:0;z-index:101;box-shadow:0 2px 16px rgba(0,0,0,.06)}
    .header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
    .logo-icon img{display:block;max-width:100%;height:auto}
    .header-actions{display:flex;gap:12px;flex-shrink:0}
    .action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;
      border-radius:10px;text-decoration:none;color:var(--dark);transition:background var(--tr)}
    .action-btn:hover{background:var(--light-gray)}
    .action-btn .label{font-size:.75rem;color:var(--gray)}

    /* ══ NAVBAR (mirrors header.php) ══ */
    .navbar{background:var(--green);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.05)}
    .navbar-inner{display:flex;align-items:center;width:100%}
    .nav-links{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:4px}
    .nav-link{color:#fff;padding:12px 16px;font-size:.875rem;font-weight:500;
      border-radius:6px;text-decoration:none;transition:background var(--tr)}
    .nav-link:hover,.nav-link.active{background:rgba(255,255,255,.18)}

    /* ══ BREADCRUMB ══ */
    .breadcrumb{background:var(--light-gray);padding:10px 0;font-size:.8125rem;color:var(--gray)}
    .breadcrumb a{color:var(--green);text-decoration:none}
    .breadcrumb a:hover{text-decoration:underline}
    .breadcrumb span{margin:0 6px;opacity:.5}

    /* ══ HERO ══ */
    .svc-hero{
      background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 55%,#22c55e 100%);
      color:#fff;padding:52px 0 44px;text-align:center;position:relative;overflow:hidden
    }
    .svc-hero::before{
      content:'';position:absolute;inset:0;pointer-events:none;
      background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E")
    }
    .svc-hero h1{font-size:clamp(1.75rem,4.5vw,2.75rem);font-weight:800;margin-bottom:12px;position:relative}
    .svc-hero p{font-size:clamp(.95rem,1.8vw,1.15rem);opacity:.92;max-width:620px;margin:0 auto 24px;position:relative;line-height:1.65}
    .hero-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative}
    .hero-badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
      color:#fff;padding:5px 14px;border-radius:50px;font-size:.8125rem;font-weight:600}

    /* ══ SERVICES SECTION ══ */
    .services-section{padding:56px 0}
    .section-header{text-align:center;margin-bottom:44px}
    .section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
    .section-header h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--dark);margin-bottom:10px}
    .section-header p{color:var(--gray);max-width:540px;margin:0 auto;font-size:.9375rem;line-height:1.65}

    /* ══ SERVICE ROW — 3-col: left text | center image | right text ══ */
    .svc-row{
      display:grid;
      grid-template-columns:1fr 320px 1fr;
      gap:0 32px;
      align-items:start;
      margin-bottom:48px;
      position:relative
    }
    /* Thin vertical divider line through the center column */
    .svc-row::before{
      content:'';position:absolute;top:24px;bottom:24px;left:50%;
      width:1px;background:var(--border);transform:translateX(-50%);
      pointer-events:none
    }

    /* ── Center image column ── */
    .svc-center{
      display:flex;flex-direction:column;align-items:center;gap:12px;
      position:relative;z-index:1
    }
    .svc-img-wrap{
      width:100%;
      display:flex;align-items:center;justify-content:center
    }
    .svc-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
    .pair-label{
      background:var(--green);color:#fff;font-size:.6875rem;font-weight:700;
      padding:5px 14px;border-radius:50px;text-align:center;white-space:nowrap
    }

    /* ── Left/Right content cards ── */
    .svc-card{
      background:var(--white);border:1px solid var(--border);
      border-radius:16px;padding:24px;
      transition:box-shadow var(--tr),transform var(--tr)
    }
    .svc-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
    .svc-tag{
      display:inline-block;background:var(--green-light);color:var(--green-dark);
      font-size:.65625rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
      padding:3px 10px;border-radius:50px;margin-bottom:10px
    }
    .svc-card h3{
      font-size:clamp(1rem,1.4vw,1.15rem);font-weight:800;
      color:var(--dark);margin-bottom:8px;line-height:1.25
    }
    .svc-card p{color:var(--gray);font-size:.9375rem;line-height:1.7;margin-bottom:12px}
    .svc-features{list-style:none;margin-bottom:16px;display:flex;flex-direction:column;gap:6px}
    .svc-features li{
      display:flex;align-items:flex-start;gap:8px;
      font-size:.9375rem;color:#374151;line-height:1.45
    }
    .svc-features li::before{
      content:'✓';background:var(--green);color:#fff;
      min-width:18px;height:18px;border-radius:50%;
      display:inline-flex;align-items:center;justify-content:center;
      font-size:.625rem;font-weight:700;margin-top:1px;flex-shrink:0
    }
    .svc-cta{
      display:inline-flex;align-items:center;gap:6px;
      background:var(--green);color:#fff;
      padding:9px 18px;border-radius:50px;
      font-size:.8125rem;font-weight:600;text-decoration:none;
      transition:background var(--tr),transform var(--tr);
      box-shadow:0 3px 10px rgba(22,163,74,.3)
    }
    .svc-cta:hover{background:var(--green-dark);transform:translateY(-1px)}


    /* ══ WHY STRIP ══ */
    .why-strip{background:var(--green);color:#fff;padding:48px 0}
    .why-strip h2{font-size:clamp(1.3rem,2.8vw,1.85rem);
      font-weight:800;text-align:center;margin-bottom:32px}
    .why-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
    .why-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
      border-radius:14px;padding:22px 16px;text-align:center;transition:background var(--tr)}
    .why-card:hover{background:rgba(255,255,255,.22)}
    .why-icon{font-size:2rem;margin-bottom:8px}
    .why-card h4{font-size:.9rem;font-weight:700;margin-bottom:5px}
    .why-card p{font-size:.8rem;opacity:.87;line-height:1.5}

    /* ══ CTA BANNER ══ */
    .cta-banner{background:linear-gradient(135deg,#f0fdf4,var(--green-mid));padding:56px 0;text-align:center}
    .cta-banner h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;color:var(--dark);margin-bottom:10px}
    .cta-banner p{color:var(--gray);max-width:500px;margin:0 auto 24px;line-height:1.65;font-size:.95rem}
    .cta-group{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
    .btn-primary{background:var(--green);color:#fff;padding:13px 28px;border-radius:50px;
      font-size:.9375rem;font-weight:600;text-decoration:none;
      transition:background var(--tr),transform var(--tr);box-shadow:0 4px 14px rgba(22,163,74,.35)}
    .btn-primary:hover{background:var(--green-dark);transform:translateY(-2px)}
    .btn-outline{background:transparent;color:var(--green);border:2px solid var(--green);
      padding:11px 26px;border-radius:50px;font-size:.9375rem;font-weight:600;
      text-decoration:none;transition:all var(--tr)}
    .btn-outline:hover{background:var(--green);color:#fff}

    /* ══ RESPONSIVE LAYOUT ══ */
    @media(max-width:1100px){
      .svc-row{grid-template-columns:1fr 260px 1fr}
      .why-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media(max-width:800px){
      /* Stack to single column on tablet/mobile */
      .svc-row{
        grid-template-columns:1fr;gap:16px;
        margin-bottom:32px
      }
      .svc-row::before{display:none}
      .svc-center{order:-1}
      .svc-img-wrap{aspect-ratio:16/9}
      .svc-icon-tile{font-size:56px}
      .why-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:560px){
      .container{padding:0 16px}
      .services-section{padding:36px 0}
      .why-grid{grid-template-columns:1fr 1fr}
      .header-inner{flex-wrap:wrap}
    }

    /* ══ PHONE LEGIBILITY BOOST ──
       Bumps the base scale up so body copy, nav, and badges
       stay comfortably readable on small touch screens. */
    @media(max-width:480px){
      html{font-size:17px}
      .svc-card p,.svc-features li,.section-header p{font-size:1rem}
      .nav-link{font-size:.95rem}
    }

    /* ══ LARGE / TV-CLASS DISPLAYS ──
       Viewports this wide are typically large monitors or
       50"+ TVs viewed from a distance — scale text up further. */
    @media(min-width:2200px){
      html{font-size:21px}
    }
    @media(min-width:3200px){
      html{font-size:25px}
    }

    /* ══ SCROLL REVEAL ══ */
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .45s ease,transform .45s ease}
    .reveal.visible{opacity:1;transform:none}
    @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}