:root{
      --cream:#f0e8d0;
      --cream-soft:#f8f4e8;
      --paper:#fffdf7;
      --charcoal:#282828;
      --green-900:#206040;
      --green-700:#287850;
      --green-600:#308858;
      --green-400:#60b068;
      --lime:#b0d078;
      --line:rgba(32,96,64,.16);
      --shadow:0 18px 45px rgba(40,40,40,.08);
      --radius-xl:30px;
      --radius-lg:22px;
      --radius-md:16px;
      --max:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--charcoal);
      background:var(--cream-soft);
      font-family:Inter,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.55;
      -webkit-font-smoothing:antialiased;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input,textarea{font:inherit}
    .wrap{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
    .eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green-700)}
    h1,h2,h3{margin:0;line-height:1.02;letter-spacing:-.035em}
    h1{font-size:clamp(3rem,6vw,6.7rem);max-width:8.4ch;font-weight:850}
    h2{font-size:clamp(2.1rem,4vw,4.2rem);font-weight:820}
    h3{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
    p{margin:0;color:#4a4a46}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.96rem 1.32rem;border-radius:999px;font-weight:800;border:1px solid transparent;transition:.2s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:var(--green-600);color:white;box-shadow:0 8px 24px rgba(48,136,88,.22)}
    .btn-primary:hover{background:var(--green-700)}
    .btn-ghost{border-color:rgba(40,40,40,.18);background:rgba(255,255,255,.5)}
    .btn-ghost:hover{border-color:var(--green-600);color:var(--green-700)}

    header{position:sticky;top:0;z-index:20;background:rgba(248,244,232,.88);backdrop-filter:blur(12px);border-bottom:1px solid rgba(32,96,64,.08)}
    .nav{min-height:118px;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:26px}
    .brand{display:flex;align-items:center;flex-shrink:0}.brand img{width:255px;height:auto}
    .navlinks{display:flex;align-items:center;gap:1.55rem;font-weight:750;font-size:1.04rem}
    .navlinks a:not(.btn){opacity:.78}.navlinks a:not(.btn):hover{opacity:1;color:var(--green-700)}

    .hero{padding:72px 0 88px;background:linear-gradient(180deg,var(--cream-soft),var(--cream));overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
    .hero-copy .eyebrow{margin-bottom:18px}
    .hero-copy .lede{font-size:clamp(1.1rem,1.8vw,1.35rem);max-width:630px;margin:26px 0 30px;color:#44443f}
    .actions{display:flex;flex-wrap:wrap;gap:12px}
    .hero-note{margin-top:26px;font-size:.9rem;color:#68685f}
    .collage{position:relative;min-height:570px}
    .photo{position:absolute;overflow:hidden;border-radius:24px;border:7px solid var(--paper);box-shadow:var(--shadow);background:#ddd}
    .photo img{width:100%;height:100%;object-fit:cover}
    .p1{width:58%;height:53%;left:3%;top:5%;transform:rotate(-2deg)}
    .p2{width:48%;height:43%;right:2%;top:0;transform:rotate(2deg)}
    .p3{width:52%;height:46%;left:1%;bottom:0;transform:rotate(1.5deg)}
    .p4{width:47%;height:42%;right:2%;bottom:3%;transform:rotate(-2deg)}

    section{padding:92px 0}
    .section-head{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:end;margin-bottom:42px}
    .section-head p{font-size:1.06rem;max-width:520px;justify-self:end}.section-head h2{white-space:nowrap;font-size:clamp(2.1rem,3.55vw,4rem)}

    .services{background:var(--paper)}
    .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .card{padding:26px;border:1px solid var(--line);background:var(--cream-soft);border-radius:var(--radius-lg);min-height:205px;display:flex;flex-direction:column;justify-content:space-between}
    .card-index{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--green-900);font-weight:900;margin-bottom:28px}
    .card p{margin-top:10px;font-size:.96rem}

    .portfolio{background:var(--cream)}
    .portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
    .project{position:relative;min-height:320px;border-radius:var(--radius-xl);overflow:hidden;background:#ddd;box-shadow:0 10px 30px rgba(40,40,40,.06)}
    .project img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
    .project:hover img{transform:scale(1.025)}
    .project .overlay{position:absolute;inset:auto 0 0 0;padding:70px 24px 24px;background:linear-gradient(transparent,rgba(18,24,20,.82));color:white}
    .project .overlay p{color:rgba(255,255,255,.8);font-size:.88rem;margin-bottom:6px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
    .project .overlay h3{color:white}
    .project.a{grid-column:span 7;min-height:455px}.project.b{grid-column:span 5;min-height:455px}
    .project.c,.project.d,.project.e{grid-column:span 4}
    .portfolio-actions{display:flex;justify-content:center;margin-top:30px}

    .process{background:var(--paper)}
    .process-box{background:var(--green-900);color:white;border-radius:36px;padding:52px;display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:start;position:relative;overflow:hidden}
    .process-box::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:var(--green-700);right:-120px;bottom:-150px;opacity:.7}
    .process-box .eyebrow{color:var(--lime)}
    .process-box h2{margin-top:12px;color:white;max-width:10ch}
    .steps{display:grid;gap:26px;position:relative;z-index:1}
    .step{display:grid;grid-template-columns:48px 1fr;gap:16px}
    .num{width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--green-900);display:grid;place-items:center;font-weight:900}
    .step h3{color:white;font-size:1.12rem;margin-bottom:5px}.step p{color:rgba(255,255,255,.72)}

    .local{background:var(--cream-soft)}
    .local-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
    .local-copy p{font-size:1.12rem;margin-top:22px;max-width:590px}
    .local-photo{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
    .local-photo img{width:100%;height:100%;object-fit:cover}

    .contact{background:var(--cream)}
    .contact-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;background:var(--paper);border-radius:36px;padding:54px;border:1px solid var(--line)}
    .contact-copy p{font-size:1.08rem;margin:20px 0 25px;max-width:430px}
    .contact-list{display:grid;gap:10px;font-size:.95rem;color:#55554f}
    form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    label{display:grid;gap:7px;font-size:.85rem;font-weight:800;color:#454541}
    .full{grid-column:1/-1}
    input,textarea{width:100%;border:1px solid rgba(40,40,40,.16);border-radius:14px;padding:13px 14px;background:#fffdf9;color:var(--charcoal);outline:none}
    input:focus,textarea:focus{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(48,136,88,.10)}
    textarea{min-height:145px;resize:vertical}
    .form-note{grid-column:1/-1;font-size:.8rem;color:#707066}

    footer{background:var(--charcoal);color:white;padding:42px 0}
    .foot{display:flex;align-items:center;justify-content:space-between;gap:24px}
    .foot img{width:210px;filter:brightness(0) invert(1);opacity:.9}
    .foot p{color:rgba(255,255,255,.6);font-size:.88rem;text-align:right}

    @media (max-width: 960px){
      .navlinks a:not(.btn){display:none}
      .brand img{width:225px}
      .hero-grid,.section-head,.process-box,.local-grid,.contact-shell{grid-template-columns:1fr}
      .hero{padding-top:50px}.hero-grid{gap:40px}.collage{min-height:500px}
      .section-head p{justify-self:start;max-width:650px}.section-head h2{white-space:normal}
      .cards{grid-template-columns:1fr 1fr}
      .process-box{gap:35px}
      .project.a,.project.b{grid-column:span 6;min-height:380px}.project.c,.project.d,.project.e{grid-column:span 4}
    }
    @media (max-width: 680px){
      .wrap{width:min(calc(100% - 24px),var(--max))}
      .nav{min-height:86px;padding:8px 0}.brand img{width:180px}.navlinks .btn{padding:.76rem 1rem;font-size:.88rem}
      .hero{padding:42px 0 62px}.hero-grid{gap:25px}.collage{min-height:420px}
      section{padding:64px 0}.cards{grid-template-columns:1fr}.card{min-height:170px}
      .portfolio-grid{display:grid;grid-template-columns:1fr}.project,.project.a,.project.b,.project.c,.project.d,.project.e{grid-column:auto;min-height:330px}
      .process-box,.contact-shell{padding:30px;border-radius:26px}
      form{grid-template-columns:1fr} form .full,.form-note{grid-column:auto}
      .foot{flex-direction:column;align-items:flex-start}.foot p{text-align:left}
    }
  

    /* Revision 3 */
    .hero{background:#e7f0e4}
    .hero-copy h1{white-space:nowrap;max-width:none;font-size:clamp(2.8rem,5.35vw,5.9rem)}
    p,.card p,.step p,.local-copy p,.contact-copy p,.section-head p,.hero-copy .lede{ text-align:justify; text-align-last:left; }
    .hero-note{text-align:left}
    .collage .photo{z-index:1}
    .collage .p1{z-index:4}
    .collage .p2,.collage .p3,.collage .p4{z-index:2}
    .reviews{background:var(--paper)}
    .reviews-shell{display:grid;grid-template-columns:.82fr 1.18fr;gap:48px;align-items:stretch}
    .reviews-copy{padding:16px 0;display:flex;flex-direction:column;justify-content:center}
    .reviews-copy h2{margin:12px 0 18px;max-width:9ch}
    .reviews-copy p{max-width:520px}
    .review-sources{display:grid;grid-template-columns:1fr 1fr;gap:18px}
    .review-source{border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;background:var(--cream-soft);display:flex;flex-direction:column;justify-content:space-between;min-height:250px}
    .review-stars{font-size:1.22rem;letter-spacing:.12em;color:var(--green-700);margin-bottom:14px}
    .review-source blockquote{margin:0 0 22px;font-size:1rem;line-height:1.7;text-align:justify;text-align-last:left}
    .review-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;border-top:1px solid var(--line);padding-top:16px}
    .review-name{font-weight:900;color:var(--ink)}
    .review-platform{font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green-700);white-space:nowrap}
    .review-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}
    .facebook-link{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;color:var(--green-700)}
    .facebook-link:hover{text-decoration:underline}
    @media (max-width:900px){
      .hero-copy h1{white-space:normal}
      .reviews-shell{grid-template-columns:1fr}
      .review-sources{grid-template-columns:1fr 1fr}
    }
    @media (max-width:620px){.review-sources{grid-template-columns:1fr}}

/* Revision 6 */
/* Keep the hero collage proportional at every browser size. */
.collage{
  width:100%;
  max-width:680px;
  min-height:0 !important;
  aspect-ratio:1 / 1;
  justify-self:center;
}
.photo{
  height:auto !important;
  transform-origin:center;
}
.photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.p1{width:60%;aspect-ratio:4 / 3;left:2%;top:3%}
.p2{width:47%;aspect-ratio:4 / 3;right:1%;top:2%}
.p3{width:52%;aspect-ratio:4 / 3;left:1%;bottom:2%}
.p4{width:46%;aspect-ratio:4 / 3;right:2%;bottom:4%}

/* One testimonial at a time. */
.reviews-shell{grid-template-columns:1fr .94fr;align-items:center}
.review-carousel{min-width:0;width:100%;max-width:620px;justify-self:end}
.review-sources{
  display:block;
  position:relative;
  min-height:280px;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.review-source{
  position:absolute;
  inset:0;
  min-height:280px;
  opacity:0;
  transform:translateX(34px);
  pointer-events:none;
  transition:opacity .55s ease, transform .55s ease;
}
.review-source.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
  z-index:2;
}
.review-dots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:16px;
}
.review-dot{
  appearance:none;
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(29,96,60,.22);
  cursor:pointer;
  transition:width .25s ease, background .25s ease;
}
.review-dot.is-active{width:28px;background:var(--green-700)}
.review-dot:focus-visible{outline:3px solid rgba(48,136,88,.22);outline-offset:3px}

.contact-messenger{
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-size:.95rem;
  color:#55554f;
}

@media (max-width:960px){
  .collage{min-height:0 !important;max-width:660px}
}
@media (max-width:900px){
  .reviews-shell{grid-template-columns:1fr}
  .review-carousel{justify-self:center;max-width:680px}
  .review-sources{min-height:290px}
  .review-source{min-height:290px}
}
@media (max-width:680px){
  .collage{min-height:0 !important;max-width:100%;aspect-ratio:1 / 1.02}
  .review-sources{min-height:350px}
  .review-source{min-height:350px;padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .review-source,.review-dot{transition:none}
}

/* Revision 7 */
/* Keep the space above and below the How it works panel deliberately equal. */
.services{padding-bottom:46px;}
.process{padding-top:46px;padding-bottom:46px;}
.portfolio{padding-top:46px;}

/* Keep the hero collage responsive without stretching the photos, while making the cards overlap enough to remove dead space between them. */
.collage{
  width:100%;
  max-width:680px;
  min-height:0 !important;
  aspect-ratio:1 / 1;
  justify-self:center;
}
.photo{height:auto !important;}
.photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;}
.p1{width:62%;height:54% !important;left:0;top:0;}
.p2{width:49%;height:48% !important;right:0;top:4%;}
.p3{width:56%;height:51% !important;left:1%;bottom:0;top:auto;}
.p4{width:50%;height:50% !important;right:0;bottom:1%;top:auto;}

@media (max-width:680px){
  .services{padding-bottom:32px;}
  .process{padding-top:32px;padding-bottom:32px;}
  .portfolio{padding-top:32px;}
  .collage{max-width:100%;aspect-ratio:1 / 1;}
  .p1{width:63%;height:55% !important;left:0;top:0;}
  .p2{width:50%;height:48% !important;right:0;top:5%;}
  .p3{width:57%;height:51% !important;left:1%;bottom:0;}
  .p4{width:51%;height:50% !important;right:0;bottom:1%;}
}

/* Security hardening helpers */
.form-honeypot{display:none!important}
.privacy-link{text-decoration:underline}