/* ==========================================================
   C&R HOME IMPROVEMENT LLC
   Palette pulled from the trade: their forest green, limestone
   (board & concrete), carpenter-pencil yellow as the accent.
   ========================================================== */
:root{
  --forest:#1C3B30;
  --forest-deep:#0E2019;
  --forest-mid:#2A5544;
  --limestone:#E7E3D8;
  --paper:#F7F5F0;
  --pencil:#D9A441;
  --concrete:#7C837B;
  --ink:#15201B;

  --max:1180px;
  --gut:clamp(20px,5vw,64px);

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"Source Serif 4",Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

.eyebrow{
  font-family:var(--f-display);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pencil);
  margin:0 0 1.1rem;
}
.eyebrow--dark{color:var(--forest-mid)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.025em;line-height:1.02;margin:0}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
p{margin:0 0 1rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  padding:.95rem 1.5rem;border-radius:2px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--pencil{background:var(--pencil);color:var(--forest-deep)}
.btn--pencil:hover{background:#e8b856}
.btn--ghost{border-color:rgba(231,227,216,.5);color:var(--limestone)}
.btn--ghost:hover{background:rgba(231,227,216,.12)}
.btn--forest{background:var(--forest);color:var(--limestone)}
.btn--forest:hover{background:var(--forest-mid)}
:focus-visible{outline:3px solid var(--pencil);outline-offset:3px}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--forest-deep);border-bottom:1px solid rgba(231,227,216,.12)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.65rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--limestone)}
.brand__mark{width:42px;height:42px;flex:none}
.brand__txt{font-family:var(--f-display);font-weight:800;font-size:1rem;letter-spacing:-.02em;line-height:1.05}
.brand__txt small{display:block;font-weight:500;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:var(--pencil);margin-top:2px}
.navlinks{display:flex;gap:1.5rem;align-items:center}
.navlinks a{font-family:var(--f-display);font-size:.84rem;font-weight:600;color:var(--limestone);text-decoration:none;opacity:.82}
.navlinks a:hover{opacity:1;color:var(--pencil)}
.navlinks a.lang{border:1px solid rgba(231,227,216,.35);padding:.32rem .7rem;border-radius:2px;opacity:1}
.navlinks a.lang:hover{background:rgba(231,227,216,.12);color:var(--limestone)}
.callbtn{font-family:var(--f-display);font-weight:800;font-size:.9rem;background:var(--pencil);color:var(--forest-deep);padding:.62rem 1rem;border-radius:2px;text-decoration:none;white-space:nowrap}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--forest);color:var(--limestone);overflow:hidden}
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center 42%;opacity:.42}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--forest) 12%,rgba(28,59,48,.88) 48%,rgba(14,32,25,.62) 100%);
}
.hero__in{position:relative;z-index:2;padding-block:clamp(3.6rem,9vw,7rem) clamp(2.6rem,5vw,3.6rem)}
.hero h1{font-size:clamp(2.4rem,6.8vw,4.7rem);max-width:17ch;margin-bottom:1.3rem}
.hero h1 em{font-style:normal;color:var(--pencil)}
.hero__lede{font-size:clamp(1.05rem,2vw,1.25rem);max-width:44ch;color:rgba(231,227,216,.88);margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__note{font-family:var(--f-display);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(231,227,216,.6);margin-top:1.5rem}

/* ---------- town band ---------- */
.band{background:var(--forest-deep);border-block:1px solid rgba(231,227,216,.12);overflow:hidden;padding-block:.8rem}
.band__track{display:flex;width:max-content;animation:slide 64s linear infinite}
.band__track span{font-family:var(--f-display);font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(231,227,216,.6);white-space:nowrap;padding-inline:1.05rem}
.band__track span::after{content:"◆";color:var(--pencil);opacity:.75;margin-left:1.05rem;font-size:.58em;vertical-align:middle}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .band__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  html{scroll-behavior:auto}
}

/* ---------- proof strip ---------- */
.proof{background:var(--limestone)}
.proof__in{display:grid;grid-template-columns:repeat(4,1fr);padding-block:1.6rem;gap:1rem}
.proof__item{padding-inline:.4rem;border-left:2px solid var(--pencil)}
.proof__item:first-child{border-left:0;padding-left:0}
.proof__k{font-family:var(--f-display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--forest);line-height:1.1}
.proof__v{font-family:var(--f-display);font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--concrete);margin-top:.28rem}
@media(max-width:760px){
  .proof__in{grid-template-columns:1fr 1fr;gap:1.3rem 1rem}
  .proof__item:nth-child(3){border-left:0;padding-left:0}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(3.6rem,8vw,6.4rem)}
.sec--lime{background:var(--limestone)}
.sec--forest{background:var(--forest);color:var(--limestone)}
.sec__head{max-width:54ch;margin-bottom:3rem}
.sec__head p{color:var(--concrete);margin-top:1rem;font-size:1.05rem}
.sec--forest .sec__head p{color:rgba(231,227,216,.82)}

/* ---------- scope of work ---------- */
.scope{display:grid;grid-template-columns:repeat(3,1fr);gap:0 3rem}
@media(max-width:900px){.scope{grid-template-columns:1fr 1fr;gap:2.6rem 2.4rem}}
@media(max-width:620px){.scope{grid-template-columns:1fr;gap:2.4rem}}
.scope__grp h3{
  font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--forest);padding-bottom:.7rem;border-bottom:3px solid var(--forest);margin:0 0 .2rem;
}
.scope__row{padding-block:.95rem;border-bottom:1px solid rgba(28,59,48,.16)}
.scope__name{font-family:var(--f-display);font-weight:700;font-size:1.04rem;letter-spacing:-.01em;display:block}
.scope__det{font-size:.88rem;color:var(--concrete);line-height:1.35;display:block;margin-top:.15rem}
.scope__more{margin-top:2.6rem;grid-column:1/-1;font-size:1.02rem;color:var(--forest);border-left:3px solid var(--pencil);padding-left:1.1rem;max-width:60ch}

/* ---------- work gallery ---------- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:900px){.work{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.work{grid-template-columns:1fr}}
.job{background:var(--paper);border:1px solid rgba(28,59,48,.14);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.job:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,32,25,.14)}
.job img{aspect-ratio:4/3;object-fit:cover;width:100%}
.job__cap{padding:.9rem 1.05rem 1.15rem}
.job__cap strong{font-family:var(--f-display);font-size:.96rem;font-weight:700;display:block}
.job__cap span{font-family:var(--f-display);font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--concrete);display:block;margin-top:.28rem}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:840px){.about{grid-template-columns:1fr}}
.about__body p{font-size:1.06rem}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid rgba(231,227,216,.25)}
.sig{font-family:var(--f-display);font-weight:800;font-size:1.12rem;color:var(--pencil);margin-top:1.6rem;letter-spacing:-.01em}
.sig small{display:block;font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,227,216,.58);margin-top:.3rem}

/* ---------- reviews ---------- */
.rev{max-width:62ch;margin:0 auto;text-align:center}
.rev__stars{color:var(--pencil);letter-spacing:.2em;font-size:1.05rem;margin-bottom:1.2rem}
.rev blockquote{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(1.25rem,2.8vw,1.85rem);line-height:1.28;letter-spacing:-.02em;color:var(--forest)}
.rev__who{font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete);margin-top:1.4rem}

/* ---------- estimate ---------- */
.est{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:880px){.est{grid-template-columns:1fr}}
.est__side p{color:rgba(231,227,216,.85)}
.callcard{border:1px solid rgba(231,227,216,.28);padding:1.5rem;margin-top:1.8rem}
.callcard a.tel{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.02em;color:var(--pencil);text-decoration:none;display:block}
.callcard span.lbl{font-family:var(--f-display);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,227,216,.58);display:block;margin-bottom:.4rem}
.callcard .em{font-size:1rem;margin-top:.9rem}

form{background:var(--paper);padding:clamp(1.4rem,3vw,2.1rem);color:var(--ink)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--forest);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  padding:.72rem .82rem;border:1px solid rgba(28,59,48,.3);border-radius:2px;background:#fff;
}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--forest);outline:2px solid var(--pencil);outline-offset:1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:480px){.two{grid-template-columns:1fr}}
.err{color:#9d3320;font-size:.84rem;font-family:var(--f-display);font-weight:600;margin-top:.32rem;display:none}
.field.bad input,.field.bad select{border-color:#9d3320}
.field.bad .err{display:block}
form .btn{width:100%;justify-content:center;margin-top:.4rem}
.formnote{font-size:.84rem;color:var(--concrete);margin:.9rem 0 0;text-align:center}
.hp{position:absolute;left:-9999px}
.done{display:none;text-align:center;padding:2.2rem 1rem}
.done h3{font-family:var(--f-display);font-size:1.5rem;color:var(--forest);margin-bottom:.6rem}
.done p{color:var(--concrete);margin:0}
form.sent .formbody{display:none}
form.sent .done{display:block}

/* ---------- footer ---------- */
.foot{background:var(--forest-deep);color:rgba(231,227,216,.74);padding-block:3.4rem 2rem;font-size:.94rem}
.foot__grid{display:grid;grid-template-columns:1.25fr 1fr 1.45fr;gap:2.4rem;margin-bottom:2.4rem}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr;gap:2rem}}
.foot h4{font-family:var(--f-display);font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--pencil);margin:0 0 .85rem}
.foot a{color:rgba(231,227,216,.82);text-decoration:none}
.foot a:hover{color:var(--pencil)}
.townlist{line-height:1.85;font-size:.89rem}
.social{display:flex;gap:.9rem;margin-top:1rem}
.social a{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid rgba(231,227,216,.3);border-radius:2px}
.social a:hover{background:rgba(231,227,216,.12)}
.social svg{width:17px;height:17px;fill:currentColor}
.foot__bar{border-top:1px solid rgba(231,227,216,.14);padding-top:1.35rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-display);font-size:.73rem;letter-spacing:.05em;color:rgba(231,227,216,.5)}

/* ---------- reveal + mobile bar ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}
.mobilebar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--pencil)}
.mobilebar a{display:block;text-align:center;padding:1rem;font-family:var(--f-display);font-weight:800;font-size:1.05rem;color:var(--forest-deep);text-decoration:none}
@media(max-width:940px){.mobilebar{display:block}body{padding-bottom:60px}}

/* ==========================================================
   MULTI-PAGE ADDITIONS
   ========================================================== */

/* compact hero for interior pages */
.phero{background:var(--forest);color:var(--limestone);position:relative;overflow:hidden}
.phero__in{padding-block:clamp(2.6rem,6vw,4.4rem)}
.phero h1{font-size:clamp(2.1rem,5.4vw,3.6rem);max-width:18ch;margin-bottom:.9rem}
.phero p{max-width:52ch;color:rgba(231,227,216,.85);font-size:1.05rem;margin:0}

/* service preview cards on the home page */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--paper);border:1px solid rgba(28,59,48,.16);
  padding:1.6rem 1.5rem 1.7rem;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,32,25,.12)}
.card h3{font-size:1.32rem;margin-bottom:.7rem;color:var(--forest)}
.card ul{list-style:none;margin:0;padding:0;font-size:.97rem;color:var(--concrete);line-height:1.85}
.card ul li::before{content:"—";color:var(--pencil);margin-right:.5rem;font-weight:700}

/* section footer link */
.morelink{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:2.2rem;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  color:var(--forest);text-decoration:none;border-bottom:2px solid var(--pencil);padding-bottom:.2rem;
}
.morelink:hover{gap:.85rem}
.sec--forest .morelink,.sec--lime .morelink.on-lime{color:var(--forest)}
.sec--forest .morelink{color:var(--limestone)}

/* closing call-to-action band */
.cta{background:var(--pencil);color:var(--forest-deep);text-align:center}
.cta__in{padding-block:clamp(2.8rem,6vw,4.2rem)}
.cta h2{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:1.4rem}
.cta .btn{background:var(--forest-deep);color:var(--pencil)}
.cta .btn:hover{background:var(--forest)}
.cta__row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* gallery filters */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{
  font-family:var(--f-display);font-size:.8rem;font-weight:700;letter-spacing:.04em;
  padding:.5rem 1rem;border:1px solid rgba(28,59,48,.28);background:transparent;
  color:var(--forest);border-radius:2px;cursor:pointer;transition:background .15s ease;
}
.filters button:hover{background:rgba(28,59,48,.08)}
.filters button[aria-pressed="true"]{background:var(--forest);color:var(--limestone);border-color:var(--forest)}
.emptynote{color:var(--concrete);font-style:italic}

/* mobile nav */
.navtoggle{display:none;background:none;border:1px solid rgba(231,227,216,.35);border-radius:2px;padding:.42rem .6rem;cursor:pointer}
.navtoggle span{display:block;width:18px;height:2px;background:var(--limestone);margin:3px 0}
@media(max-width:940px){
  .navtoggle{display:block;order:3;margin-left:.15rem}
  .callbtn{order:2}
  .brand{margin-right:auto}
  .navlinks{
    position:absolute;top:100%;left:0;right:0;background:var(--forest-deep);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 0 1rem;
    border-bottom:1px solid rgba(231,227,216,.14);display:none;
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:.9rem var(--gut);font-size:1.02rem;opacity:1;border-bottom:1px solid rgba(231,227,216,.09)}
  .navlinks a.lang{margin:.8rem var(--gut) .2rem;text-align:center;padding:.75rem;border-bottom:0}
  .topbar{position:relative}
  .topbar.sticky{position:sticky;top:0}
}
.navlinks a[aria-current="page"]{color:var(--pencil);opacity:1}

/* build credit */
.foot__bar .credit{color:rgba(231,227,216,.42)}
.foot__bar .credit a{color:rgba(231,227,216,.62);text-decoration:none;border-bottom:1px solid rgba(217,164,65,.5)}
.foot__bar .credit a:hover{color:var(--pencil);border-bottom-color:var(--pencil)}

/* Tally embed wrapper — keeps the light form box behind the transparent iframe.
   Tally still reserves vertical space where the form title would be, and that
   space is inside the iframe so page CSS can't reach it. --tally-nudge pulls the
   whole iframe up to swallow it. Raise the number if a gap is still showing,
   lower it if the first field looks clipped. */
.tallybox{
  --tally-nudge:34px;
  background:var(--paper);
  padding:.7rem clamp(1rem,2.2vw,1.6rem) 1rem;
  overflow:hidden;
}
.tallybox iframe{display:block;width:100%;border:0;margin-top:calc(var(--tally-nudge) * -1)}
.tallybox .formnote{margin-top:.2rem}
@media(max-width:600px){.tallybox{--tally-nudge:26px}}

/* narrow phones: drop the tagline so the header fits on one line */
@media(max-width:430px){
  .brand__txt{font-size:.9rem;max-width:11ch;line-height:1.15}
  .brand__txt small{display:none}
  .brand__mark{width:36px;height:36px}
  .callbtn{font-size:.82rem;padding:.55rem .75rem}
}