/* Keller Built Construction — page sections */

section{padding:clamp(52px,6vw,88px) 0;scroll-margin-top:84px}
.hero{padding:0;scroll-margin-top:0}

/* ---------- reviews ---------- */
.reviews{background:var(--mill-2);border-bottom:2px solid #C3C0B8}
.reviews h2{
  max-width:var(--wrap);margin:0 auto calc(var(--sp)*5);
  padding:0 clamp(16px,3vw,32px);
  font-size:clamp(34px,4.4vw,58px);text-transform:uppercase;
}
.reviews__grid{
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,32px);
  display:grid;grid-template-columns:1.6fr 1fr;gap:calc(var(--sp)*4);align-items:start;
}
.quote{
  margin:0;padding:calc(var(--sp)*4);
  background:var(--mill);border:2px solid var(--ink);
  box-shadow:7px 7px 0 rgba(22,30,39,.14);
}
.quote p{font-size:18px;line-height:1.62}
.quote--short p{font-family:var(--f-disp);font-size:clamp(30px,3.4vw,44px);line-height:1.02;text-transform:uppercase;font-weight:800}
.quote footer{
  margin-top:calc(var(--sp)*3);padding-top:calc(var(--sp)*2);
  border-top:1px solid var(--steel);display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.quote cite{font:600 15px/1 var(--f-mono);font-style:normal;letter-spacing:-.02em}
.quote footer span{font:400 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--steel)}

/* ---------- services ---------- */
.svc__lead{
  max-width:var(--wrap);margin:calc(var(--sp)*6) auto 0;
  padding:0 clamp(16px,3vw,32px);
  display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--sp)*4);
}
.svc__big{margin:0;border:2px solid var(--ink);background:var(--mill-2);display:flex;flex-direction:column}
.svc__big img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:2px solid var(--ink)}
.svc__big-copy{padding:calc(var(--sp)*3)}
.svc__big h3{font-size:clamp(24px,2.5vw,34px);text-transform:uppercase;margin-bottom:10px}
.svc__big p{font-size:16.5px;color:#3A414A}

.svc__list{
  max-width:var(--wrap);margin:calc(var(--sp)*6) auto 0;
  padding:0 clamp(16px,3vw,32px);
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:2px solid var(--ink);
}
.svc__list li{
  display:grid;grid-template-columns:52px 1fr;column-gap:14px;align-items:baseline;
  padding:calc(var(--sp)*2.5) 0;border-bottom:1px solid var(--steel);
}
.svc__list li:nth-child(odd){padding-right:calc(var(--sp)*4)}
.svc__list li:nth-child(even){padding-left:calc(var(--sp)*4);border-left:1px solid var(--steel)}
.svc__list b{font:400 12px/1 var(--f-mono);color:var(--cyan-lo);letter-spacing:.06em}
.svc__list h3{font-size:22px;text-transform:uppercase;grid-column:2}
.svc__list p{grid-column:2;font-size:15px;color:#525960;margin-top:4px}
.svc__foot{
  max-width:var(--wrap);margin:calc(var(--sp)*5) auto 0;padding:0 clamp(16px,3vw,32px);
  font:600 17px/1.5 var(--f-mono);letter-spacing:-.03em;
}
.svc__foot a{color:var(--cyan-lo)}

/* ---------- past projects (dark) ---------- */
.work{
  background-color:var(--panel);color:var(--mill);
  background-image:repeating-linear-gradient(90deg,
    var(--panel) 0, var(--panel) calc(var(--rib-w) - 2px),
    var(--rib) calc(var(--rib-w) - 2px), var(--rib) var(--rib-w));
}
.ba{
  max-width:var(--wrap);margin:calc(var(--sp)*6) auto 0;padding:0 clamp(16px,3vw,32px);
  display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--sp)*5);
}
.ba__pair{margin:0}
.ba__imgs{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#000;border:2px solid #000}
.ba__i{position:relative}
.ba__i img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tag{
  position:absolute;left:0;bottom:0;
  font:900 12px/1 var(--f-sten);letter-spacing:.12em;text-transform:uppercase;
  background:rgba(0,0,0,.8);color:var(--mill);padding:7px 10px 5px;
}
.tag--on{background:var(--cyan);color:#04161E}
.ba figcaption{padding-top:calc(var(--sp)*2)}
.ba h3{font-size:clamp(22px,2.3vw,30px);text-transform:uppercase;margin-bottom:6px}
.ba figcaption p{font-size:16px;color:#B7B4AD;max-width:52ch}

.gal{
  max-width:var(--wrap);margin:calc(var(--sp)*6) auto 0;padding:0 clamp(16px,3vw,32px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--sp)*3);
}
.gal figure{margin:0;border:2px solid #000;background:#000}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 32%;transition:opacity .3s ease}
.gal figure:nth-child(4) img{aspect-ratio:16/9}
.gal figure:nth-child(4){grid-column:span 2}
.gal figcaption{
  padding:11px 12px;font:400 12px/1.35 var(--f-mono);letter-spacing:-.02em;
  color:#A8A5A0;text-transform:uppercase;
}
.gal figure:hover img{opacity:.82}

/* ---------- process ---------- */
.proc{background:var(--mill)}
.proc__list{
  max-width:var(--wrap);margin:calc(var(--sp)*5) auto 0;padding:0 clamp(16px,3vw,32px);
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:2px solid var(--ink);
}
.proc__list li{padding:calc(var(--sp)*4) calc(var(--sp)*4) calc(var(--sp)*4) 0;border-right:1px solid var(--steel)}
.proc__list li:last-child{border-right:0}
.proc__list li:not(:first-child){padding-left:calc(var(--sp)*4)}
.proc__list b{display:block;font:400 12px/1 var(--f-mono);color:var(--cyan-lo);letter-spacing:.1em;margin-bottom:14px}
.proc__list h3{font-size:clamp(24px,2.4vw,32px);text-transform:uppercase;margin-bottom:10px}
.proc__list p{font-size:16px;color:#464D55}

/* ---------- about ---------- */
.about{background:var(--mill-2);border-top:2px solid #C3C0B8}
.about__inner{
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,3vw,32px);
  display:grid;grid-template-columns:1.5fr 1fr;gap:calc(var(--sp)*6);align-items:center;
}
.about__copy h2{font-size:clamp(36px,4.8vw,64px);text-transform:uppercase;margin-bottom:calc(var(--sp)*3)}
.about__lead{font-size:19px;line-height:1.6;margin-bottom:calc(var(--sp)*2.5)}
.about__copy p{max-width:60ch;color:#3A414A}
.about__marks{display:flex;flex-wrap:wrap;gap:12px;margin-top:calc(var(--sp)*4)}
.about__marks .stamp:nth-child(2){transform:rotate(1.5deg)}
.about__marks .stamp:nth-child(3){transform:rotate(-3deg)}
.about__shot{margin:0;padding:0;border:2px solid var(--ink);box-shadow:9px 9px 0 rgba(22,30,39,.16)}

/* ---------- service area ---------- */
.area{
  background-color:var(--panel);color:var(--mill);
  background-image:repeating-linear-gradient(90deg,
    var(--panel) 0, var(--panel) calc(var(--rib-w) - 2px),
    var(--rib) calc(var(--rib-w) - 2px), var(--rib) var(--rib-w));
}
.area__list{
  max-width:var(--wrap);margin:calc(var(--sp)*5) auto 0;padding:0 clamp(16px,3vw,32px);
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid #2A3037;
}
.area__list li{
  padding:16px 12px;border-bottom:1px solid #2A3037;border-right:1px solid #2A3037;
  font:600 15px/1 var(--f-mono);letter-spacing:-.02em;text-transform:uppercase;
}
.area__list li:nth-child(4n){border-right:0}

/* ---------- close ---------- */
.close{background:var(--cyan);color:#04161E;text-align:center}
.close h2{font-size:clamp(40px,6vw,86px);text-transform:uppercase;letter-spacing:-.025em}
.close p{margin-top:calc(var(--sp)*2);font-size:19px}
.close__cta{display:flex;flex-wrap:wrap;gap:calc(var(--sp)*2);justify-content:center;margin-top:calc(var(--sp)*5)}
.close .plate{background:#04161E;color:var(--cyan);border-color:#04161E;box-shadow:5px 5px 0 rgba(4,22,30,.3)}
.close .plate--ghost{background:transparent;color:#04161E;border-color:#04161E}
.close .plate--ghost:hover{background:#04161E;color:var(--cyan)}
.close__mail{margin-top:calc(var(--sp)*4)}
.close__mail a{font:600 16px/1 var(--f-mono);color:#04161E}

/* ---------- footer ---------- */
.ftr{
  background:var(--panel);color:#B7B4AD;
  display:grid;grid-template-columns:110px repeat(3,1fr);
  gap:calc(var(--sp)*4);align-items:start;
  max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,64px) clamp(16px,3vw,32px);
  border-top:3px solid #000;
}
.ftr{max-width:none}
.ftr__mark{width:104px;height:auto}
.ftr__col h3{font:900 14px/1 var(--f-sten);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.ftr__col p{font-size:15px;line-height:1.7}
.ftr__col a{color:var(--mill);text-decoration:none}
.ftr__col a:hover{color:var(--cyan)}
.ftr__base{
  grid-column:1/-1;border-top:1px solid #2A3037;padding-top:calc(var(--sp)*3);
  font:400 12px/1 var(--f-mono);color:var(--steel);letter-spacing:-.02em;
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .svc__list,.proc__list{grid-template-columns:1fr}
  .svc__list li:nth-child(even){padding-left:0;border-left:0}
  .svc__list li:nth-child(odd){padding-right:0}
  .proc__list li{border-right:0;border-bottom:1px solid var(--steel);padding:calc(var(--sp)*4) 0}
  .proc__list li:not(:first-child){padding-left:0}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure:nth-child(4){grid-column:span 2}
  .area__list{grid-template-columns:repeat(3,1fr)}
  .area__list li:nth-child(4n){border-right:1px solid #2A3037}
  .area__list li:nth-child(3n){border-right:0}
}
@media (max-width:900px){
  .reviews__grid,.svc__lead,.ba,.about__inner{grid-template-columns:1fr}
  .about__shot{max-width:420px;margin-top:calc(var(--sp)*4)}
  .ftr{grid-template-columns:1fr}
  .ftr__mark{width:80px}
}
@media (max-width:560px){
  .gal{grid-template-columns:1fr}
  .gal figure:nth-child(4){grid-column:span 1}
  .area__list{grid-template-columns:repeat(2,1fr)}
  .area__list li:nth-child(3n){border-right:1px solid #2A3037}
  .area__list li:nth-child(2n){border-right:0}
  .ba__imgs{grid-template-columns:1fr}
  .close__cta{flex-direction:column}
}

/* ---------- orchestrated reveal (only when JS enables motion) ---------- */
.js-motion .will-in{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);
}
.js-motion .will-in.is-in{opacity:1;transform:none}
.js-motion .stamp{transition:transform .5s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js-motion .will-in{opacity:1;transform:none;transition:none}
}