:root{
      --olive:#2f3f1f;
      --olive-2:#253317;
      --cream:#f6efe7;
      --sand:#eadfd3;
      --sand-2:#e7d8ca;
      --ink:#101828;
      --muted:#667085;
      --line:rgba(16,24,40,.10);
      --shadow: 0 18px 46px rgba(0,0,0,.12);
      --shadow2: 0 14px 32px rgba(0,0,0,.10);
      --radius:18px;
      --radius2:22px;
      --max: 1180px;
        --footer-bg: #111827;     /* dark slate */
        --footer-bg-2: #0b1220;  /* deeper shadow tone */
    }
    
   /* *{ outline: 1px solid rgba(255,0,0,.15); } */
    
    html, body{
  width: 100%;
  overflow-x: hidden;
}

header.nav,
.hero,
.footer-wrap{
  width: 100%;
  max-width: none;
}

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink);
      background:#fff;
      line-height:1.6;
    }
    img{max-width:100%;display:block;height:auto}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--max);margin:0 auto;padding:0 20px}
    .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }

    /* ---------- NAV ---------- */
    header.nav{
      position:sticky;top:0;z-index:50;
      background: rgba(47,63,31,.92);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }
    .nav-inner{
      height:78px;
      display:flex;align-items:center;justify-content:space-between;
      gap:18px;
    }
    .brand{
      display:flex;align-items:center;gap:12px;
      min-width: 240px;
      color:#fff;
    }
    .brand-mark{
      width:44px;height:44px;border-radius:12px;
      display:grid;place-items:center;
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);
      overflow:hidden;
    }
    .brand-mark img{width:100%;height:100%;object-fit:contain;padding:6px}
    .brand strong{font-weight:900;letter-spacing:.2px;font-size:16px;line-height:1.1}
    .brand small{opacity:.75;font-size:12px;margin-left:6px;white-space:nowrap}
    .menu{
      display:flex;align-items:center;gap:22px;
      font-size:12px;
      letter-spacing:.45px;
      text-transform:uppercase;
      color:rgba(255,255,255,.82);
    }
    .menu a{padding:8px 2px;position:relative}
    .menu a:hover{color:#fff}
    .menu a::after{
      content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;
      background: rgba(255,255,255,.82);
      transition:.2s width;
    }
    .menu a:hover::after{width:100%}

    .nav-actions{display:flex;align-items:center;gap:12px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      padding: 12px 18px;
      border-radius: 999px;
      border: 0;
      cursor:pointer;
      font-weight:900;
      letter-spacing:.2px;
      white-space:nowrap;
      transition: .2s transform, .2s filter;
    }
    .btn:hover{transform: translateY(-1px); filter: brightness(.98)}
    .btn:active{transform: translateY(0)}
    .btn-cream{
      background: var(--sand);
      color:#1f2937;
      border:1px solid rgba(255,255,255,.30);
    }
    .btn-ghost{
      background: rgba(255,255,255,.08);
      color:#fff;
      border:1px solid rgba(255,255,255,.22);
    }

    .icon-btn{
      width:42px;height:42px;border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      display:grid;place-items:center;
      color:#fff;
      cursor:pointer;
      transition:.2s transform;
    }
    .icon-btn:hover{transform: translateY(-1px)}
    .hamburger{display:none}

    .mobile-panel{
      position:absolute;
      top:78px;
      right:20px;
      width:min(320px, calc(100% - 40px));
      display:none;
      background: rgba(47,63,31,.98);
      border:1px solid rgba(255,255,255,.16);
      border-radius:14px;
      box-shadow: 0 18px 46px rgba(0,0,0,.25);
      overflow:hidden;
      z-index:60;
    }
    .mobile-panel.open{display:block}
    .mobile-panel a{
      display:block;
      padding:16px 18px;
      border-bottom:1px solid rgba(255,255,255,.10);
      text-transform:uppercase;
      letter-spacing:.45px;
      font-size:12px;
      color:rgba(255,255,255,.90);
      background: rgba(255,255,255,.02);
    }
    .mobile-panel a:last-child{border-bottom:0}
    .mobile-panel a:hover{background: rgba(255,255,255,.06)}

    @media (max-width: 920px){
      .menu{display:none}
      .hamburger{display:grid}
      .brand small{display:none}
    }

    /* ---------- HERO ---------- */
    .hero{
      background: var(--olive);
      color:#fff;
      position:relative;
      overflow:hidden;
      padding: 0 0 26px;
    }
    .hero::after{
      content:"";
      position:absolute;left:0;right:0;bottom:-80px;height:160px;
      background: var(--sand);
      transform: rotate(-1.2deg);
      border-radius: 0 0 60% 60%;
      box-shadow: 0 -10px 40px rgba(0,0,0,.08);
    }
    .hero-inner{
      position:relative;
      z-index:1;
      padding: 52px 0 0;
    }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 34px;
      align-items:stretch;
      padding-bottom: 26px;
    }
    .hero-kicker{
      opacity:.88;
      font-size:12px;
      letter-spacing:.55px;
      margin: 0 0 10px;
      text-transform:uppercase;
    }
    .hero h1{
      margin:0 0 14px;
      font-weight: 800;
      letter-spacing: 1.1px;
      text-transform: uppercase;
      font-size: clamp(38px, 5.3vw, 75px);
      line-height: .92;
    }
    .hero p{
      margin:0 0 18px;
      max-width: 62ch;
      color: rgba(255,255,255,.78);
      font-size: 14px;
    }

    .cta-row{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom: 16px;
    }

    .hero-contact{
      display:flex;
      align-items:center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(0,0,0,.14);
      border:1px solid rgba(255,255,255,.12);
      width: fit-content;
      margin-top: 8px;
    }
    .avatar{
      width:44px;height:44px;border-radius:999px;
      background: rgba(255,255,255,.14);
      border:1px solid rgba(255,255,255,.18);
      overflow:hidden;
      display:grid;place-items:center;
      font-weight:800;
    }
    .hero-contact small{display:block;opacity:.78}
    .hero-contact strong{display:block;letter-spacing:.2px}

    .hero-media{
      position:relative;
      display:flex;
      align-items:flex-end;
      justify-content:flex-end;
      padding-top: 6px;
    }
    .photo-card{
      width: 100%;
      max-width: 560px;
      border-radius: var(--radius2);
      overflow:hidden;
      box-shadow: var(--shadow);
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.16);
      aspect-ratio: 4/3.1;
      position:relative;
    }
    .photo-card img{
      width:100%;height:100%;object-fit:cover;
      filter: saturate(1.02) contrast(1.02);
    }
    .photo-overlay{
      position:absolute;inset:0;
      background:
        linear-gradient(135deg, rgba(47,63,31,.55), rgba(0,0,0,.05));
      pointer-events:none;
    }
    .photo-overlay img{
      position:absolute;inset:0;
      width:100%;height:100%;
      object-fit:cover;
      mix-blend-mode: overlay;
      opacity:.32;
      pointer-events:none;
    }
    .verified{
      position:absolute;
      left: 14px;
      bottom: 16px;
      background: #efe6da;
      border-radius: 14px;
      padding: 14px 14px;
      width: 230px;
      box-shadow: var(--shadow2);
      border: 1px solid rgba(16,24,40,.10);
      color:#111827;
    }
    .verified .top{
      display:flex;align-items:center;gap:8px;
      font-weight:950;
      margin-bottom: 6px;
      font-size: 13px;
    }
    .badge-check{
      width:18px;height:18px;border-radius:999px;
      background: #16a34a;
      color:#fff;
      display:grid;place-items:center;
      font-size:12px;
      line-height:1;
    }
    .stars{
      display:flex;gap:2px;
      color:#f59e0b;
      font-size: 14px;
      margin-bottom: 4px;
    }
    .verified small{color:#344054;font-weight:800}

    /* ---------- PILLS ---------- */
.pill-row{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  background: var(--sand);
  border-radius: 22px;
  padding: 18px;
  margin-top: 24px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  border:1px solid rgba(16,24,40,.08);
}

.pill{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 18px 18px;
  border-radius: 16px;
  min-height: 92px;

  /* start DARK */
  background: var(--olive-2);
  border: 1px solid rgba(255,255,255,.14);
  color:#fff;

  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease;
}

.pill .ico{
  width:46px;height:46px;border-radius: 12px;
  flex: 0 0 46px;
  display:grid;place-items:center;

  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);

  transition: background .18s ease, border-color .18s ease;
}

.pill h4{
  margin:0 0 4px;
  font-size: 14px;
  font-weight: 950;
}

.pill p{
  margin:0;
  font-size: 12.8px;
  color: rgba(255,255,255,.76);
  transition: color .18s ease;
}

.pill .ico svg{
  width:22px;height:22px;
  fill:#fff;
  transition: fill .18s ease;
}

/* hover -> LIGHT */
.pill:hover{
  background: rgba(255,255,255,.34);
  border-color: rgba(16,24,40,.10);
  color: var(--ink);
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.pill:hover p{ color: rgba(16,24,40,.66); }

.pill:hover .ico{
  background: rgba(47,63,31,.14);
  border-color: rgba(16,24,40,.08);
}

.pill:hover .ico svg{ fill: var(--olive-2); }

/* keep "active" dark (optional) */
.pill.active{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}


    @media (max-width: 980px){
      .hero-grid{grid-template-columns: 1fr;gap:18px}
      .pill-row{grid-template-columns: 1fr}
    }

    /* ---------- SECTIONS ---------- */
    .section{
      padding: 82px 0 66px;
      background: #fff;
      position:relative;
    }
    .split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 34px;
      align-items:center;
    }
    .split h2{
      margin:0 0 14px;
      font-size: clamp(28px, 3.1vw, 44px);
      line-height: 1.1;
      font-weight: 950;
      letter-spacing:.2px;
    }
    .copy p{
      margin:0 0 12px;
      color: var(--muted);
      font-size: 14px;
      max-width: 68ch;
    }

    .feature-list{
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: 10px;
    }
    .feature{
      display:flex;gap:10px;align-items:flex-start;
      padding: 12px 12px;
      border-radius: 14px;
      background: #f7f3ee;
      border:1px solid rgba(16,24,40,.08);
    }
    .feature .dot{
      width:22px;height:22px;border-radius:999px;
      background: rgba(47,63,31,.14);
      border:1px solid rgba(16,24,40,.08);
      display:grid;place-items:center;
      flex:0 0 22px;
      margin-top:2px;
      color: var(--olive-2);
      font-weight:950;
      font-size:13px;
    }
    .feature span{
      color:#1f2937;
      font-weight:750;
      font-size: 13.5px;
      line-height:1.35;
    }

    .stack{
      position:relative;
      width:min(560px, 100%);
      margin-left:auto;
      height: 430px;
    }
    .stack .cardimg{
      position:absolute;
      right: 0;
      width: 78%;
      height: 92%;
      border-radius: 22px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border:1px solid rgba(16,24,40,.10);
      background: #f3f4f6;
    }
    .stack .cardimg:nth-child(1){transform: translate(-120px, 16px) rotate(-6deg); opacity:.98}
    .stack .cardimg:nth-child(2){transform: translate(-66px, 8px) rotate(-3deg); opacity:.99}
    .stack .cardimg:nth-child(3){transform: translate(0px, 0px) rotate(0deg); opacity:1}
    .stack img{width:100%;height:100%;object-fit:cover}

    @media (max-width: 980px){
      .split{grid-template-columns: 1fr;gap: 18px}
      .stack{height: 360px;margin-left:0}
      .stack .cardimg{width: 82%}
    }

    /* ---------- ESTIMATE FORM ---------- */
    .estimate{
      background: var(--sand);
      padding: 74px 0 82px;
      border-top: 1px solid rgba(16,24,40,.08);
      border-bottom: 1px solid rgba(16,24,40,.08);
    }
    .estimate-card{
      background: #fff;
      border-radius: 22px;
      border:1px solid rgba(16,24,40,.10);
      box-shadow: 0 16px 38px rgba(0,0,0,.08);
      overflow:hidden;
    }
    .estimate-head{
      display:flex;align-items:flex-start;justify-content:space-between;
      gap: 16px;
      padding: 22px 22px 0;
    }
    .estimate-head h3{
      margin:0 0 8px;
      font-weight: 950;
      letter-spacing:.2px;
      font-size: 22px;
    }
    .estimate-head p{
      margin:0 0 16px;
      color: var(--muted);
      font-size: 13.5px;
      max-width: 70ch;
    }
    .gif-badge{
      width: 110px;
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(16,24,40,.10);
      background:#fff;
      flex: 0 0 110px;
      box-shadow: 0 10px 20px rgba(0,0,0,.08);
    }
    .gif-badge img{width:100%;height:100%;object-fit:cover}

    form.grid{
      padding: 18px 22px 22px;
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    .field{display:flex;flex-direction:column;gap:6px}
    .field label{
      font-size: 12px;
      font-weight: 900;
      letter-spacing:.35px;
      color:#1f2937;
      text-transform: uppercase;
    }
    .field input, .field select, .field textarea{
      border:1px solid rgba(16,24,40,.12);
      border-radius: 14px;
      padding: 12px 12px;
      font-size: 14px;
      outline:none;
      background: #fff;
    }
    .field input:focus, .field select:focus, .field textarea:focus{
      border-color: rgba(47,63,31,.55);
      box-shadow: 0 0 0 4px rgba(47,63,31,.10);
    }
    .span-2{grid-column: span 2}
    .form-actions{
      grid-column: span 2;
      display:flex;align-items:center;justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
      padding-top: 6px;
    }
    .form-actions small{
      color: var(--muted);
      font-size: 12.5px;
      max-width: 70ch;
    }
    .btn-olive{
      background: var(--olive-2);
      color:#fff;
      padding: 12px 18px;
      border-radius: 999px;
      font-weight: 950;
      letter-spacing: .55px;
      text-transform: uppercase;
      font-size: 12px;
      border:0;
      cursor:pointer;
      transition:.2s transform;
    }
    .btn-olive:hover{transform: translateY(-1px)}
    .btn-olive:active{transform: translateY(0)}

    @media (max-width: 760px){
      form.grid{grid-template-columns: 1fr}
      .span-2{grid-column: span 1}
      .form-actions{grid-column: span 1}
      .estimate-head{flex-direction:column}
      .gif-badge{width: 100%; flex: 0 0 auto; max-width: 240px}
    }

    /* ---------- GALLERY ---------- */
    .gallery{
      padding: 72px 0 66px;
      background:#fff;
    }
    .gallery h3{
      margin:0 0 10px;
      font-size: 26px;
      font-weight: 950;
    }
    .gallery p{margin:0 0 18px;color:var(--muted);max-width:70ch}
    .grid3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .gcard{
      border-radius: 22px;
      overflow:hidden;
      border:1px solid rgba(16,24,40,.10);
      box-shadow: 0 12px 26px rgba(0,0,0,.08);
      background:#f3f4f6;
      aspect-ratio: 4/3;
    }
    .gcard img{width:100%;height:100%;object-fit:cover}
    @media (max-width: 980px){
      .grid3{grid-template-columns: 1fr;gap: 14px}
    }

/* ---------- FOOTER + NEWSLETTER (CLEAN, NON-OVERLAP) ---------- */

.footer-wrap{
  background: linear-gradient(
    180deg,
    var(--footer-bg),
    var(--footer-bg-2)
  );
  padding: 56px 0 0;
  margin-top: 56px;
  position: relative;
}


/* Newsletter sits ABOVE footer content and pushes it down (no overlap) */
.footer-wrap .newsletter{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(900px, calc(100% - 40px));
  margin: -96px auto 0; /* pulls it upward like your screenshot */
  background: rgba(47,63,31,.98);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.footer-wrap .newsletter::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 86% 10%, rgba(255,255,255,.10), transparent 55%);
  pointer-events:none;
}

.footer-wrap .nl-inner{
  position:relative;
  padding: 26px 26px 22px;
  color:#fff;
  display:grid;
  gap: 12px;
  text-align:center;
}

.footer-wrap .nl-inner h3{
  margin:0;
  font-weight: 950;
  font-size: 26px;
  line-height: 1.15;
}

.footer-wrap .nl-form{
  margin: 8px auto 0;
  width: min(520px, 100%);
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
}

.footer-wrap .nl-form input{
  flex: 1;
  border-radius: 999px;
  padding: 12px 14px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  color:#fff;
  outline:none;
  font-size: 13px;
}

.footer-wrap .nl-form input::placeholder{color:rgba(255,255,255,.65)}

.footer-wrap .nl-form button{
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--sand);
  color:#111827;
  border:0;
  font-weight: 950;
  font-size: 11px;
  letter-spacing:.55px;
  text-transform:uppercase;
  cursor:pointer;
}

@media (max-width: 560px){
  .footer-wrap .nl-form{flex-direction:column}
  .footer-wrap .nl-form input,
  .footer-wrap .nl-form button{width:100%}
}

/* Footer */
.footer-wrap footer{
  color: rgba(255,255,255,.80);
  padding: 66px 0 34px;
  position:relative;
  overflow:hidden;
  margin-top: 34px;
}

.footer-wrap footer::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.05), transparent 55%);
  pointer-events:none;
}

.footer-wrap .footer-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 26px;
  padding-top: 10px;
  z-index:1;
}

.footer-wrap .foot-brand{
  display:flex;align-items:center;gap:12px;margin-bottom: 10px;
}

.footer-wrap .foot-brand .mark{
  width:42px;height:42px;border-radius:12px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;
  overflow:hidden;
}

.footer-wrap .foot-brand .mark img{
  width:100%;height:100%;object-fit:contain;padding:6px
}

.footer-wrap footer h4{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .55px;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  font-weight: 950;
}

.footer-wrap .foot p{
  margin:0 0 10px;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  max-width: 44ch;
}

.footer-wrap .foot a{
  display:block;
  font-size: 13px;
  color: rgba(255,255,255,.68);
  margin-bottom: 8px;
}

.footer-wrap .foot a:hover{color:#fff}

.footer-wrap .copyright{
  position:relative;
  z-index:1;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: rgba(255,255,255,.50);
}

@media (max-width: 980px){
  .footer-wrap .footer-grid{grid-template-columns: 1fr 1fr;gap:18px}
}

@media (max-width: 560px){
  .footer-wrap .footer-grid{grid-template-columns: 1fr}
}


    /* Back to top */
    .backtop{
      position:fixed;
      right: 16px;
      bottom: 18px;
      width:44px;height:44px;
      border-radius: 12px;
      background: rgba(17,24,39,.90);
      color:white;
      border: 1px solid rgba(255,255,255,.14);
      display:grid;place-items:center;
      cursor:pointer;
      box-shadow: 0 14px 30px rgba(0,0,0,.25);
      opacity:0;
      transform: translateY(8px);
      pointer-events:none;
      transition: .2s;
      z-index: 80;
    }
    .backtop.show{opacity:1;transform: translateY(0);pointer-events:auto}
    
    /* ===== Mobile NAV fix: prevent CTA from sliding off-screen ===== */
@media (max-width: 520px){
  .nav-inner{
    height: auto;                 /* allow 2-line header */
    padding: 10px 0;
    gap: 10px;
    flex-wrap: wrap;              /* KEY: allows wrapping */
    align-items: center;
  }

  .brand{
    min-width: 0;                 /* remove the 240px constraint */
    flex: 1 1 auto;               /* brand can shrink */
  }

  .brand strong{
    font-size: 15px;
  }

  .nav-actions{
    flex: 0 0 auto;
    margin-left: auto;            /* keep CTA to the right */
  }

  .btn.btn-cream{
    padding: 10px 14px;           /* slightly smaller */
    font-size: 13px;
  }
}