/* LA Furnace Repair & Install: flat natural colors, boxed grid */
:root{--oat:#EFE6D4;--bone:#FAF6EC;--clay:#B8512E;--char:#26211D;--ochre:#E2B04F;--line:4px;
  --slab:"Alfa Slab One",Georgia,serif;--sans:"Public Sans",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding-bottom:56px;font:400 17px/1.55 var(--sans);color:var(--char);background:var(--char)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 .8em}
h1,h2,h3{margin:0 0 .4em;font-family:var(--slab);font-weight:400;line-height:1.02;text-transform:uppercase}
h1{font-size:clamp(2.5rem,9vw,5.2rem)}
h2{font-size:clamp(1.9rem,5.5vw,3rem)}
h3{font-size:1.3rem}
:focus-visible{outline:4px solid var(--ochre);outline-offset:-4px}
.grid{display:grid;gap:var(--line);background:var(--char);border:var(--line) solid var(--char);max-width:1240px;margin:0 auto}
main .grid,.foot{margin-top:calc(var(--line) * -1)}
.box{padding:22px 20px;background:var(--bone)}

/* header */
.head{grid-template-columns:1fr 1fr}
.brand{grid-column:1/-1;display:flex;flex-direction:column;justify-content:center;background:var(--ochre)}
.brand b{font:400 2rem/1 var(--slab);text-transform:uppercase}
.brand span{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.navbox{padding:14px 12px;background:var(--oat);font-weight:800;text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;text-align:center}
.navbox:hover{background:var(--char);color:var(--bone)}
.phone{grid-column:1/-1;background:var(--clay);color:var(--bone);font:400 1.7rem/1.1 var(--slab);text-align:center}

/* hero */
.hero{grid-template-columns:1fr}
.h1box{background:var(--oat)}
.kicker{display:inline-block;margin-bottom:16px;padding:4px 10px;background:var(--char);color:var(--bone);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.lead{max-width:36rem;font-size:1.1rem}
.imgbox{padding:0;overflow:hidden}
.imgbox img{width:100%;height:100%;min-height:240px;object-fit:cover}
.callbox{display:flex;flex-direction:column;justify-content:center;background:var(--clay);color:var(--bone)}
.callbox span,.addrbox span,.c-phone span,.c-mail span,.c-addr span{font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.callbox b{font:400 clamp(2rem,9vw,3.4rem)/1.05 var(--slab)}
.callbox:hover{background:var(--char)}
.addrbox{background:var(--ochre)}
.addrbox b{display:block;margin-top:4px;font-size:1.15rem}

/* sections */
.sec-title{grid-column:1/-1;background:var(--char);color:var(--bone)}
.sec-title h2{margin:0}
.services{grid-template-columns:1fr}
.svc{background:var(--bone);transition:background .15s,color .15s}
.svc:hover{background:var(--clay);color:var(--bone)}
.num{display:block;margin-bottom:10px;font:400 2.6rem/1 var(--slab);color:var(--clay)}
.svc:hover .num{color:var(--ochre)}
.svc p{margin:0}
.signs{grid-template-columns:1fr 1fr}
.sign{background:var(--oat)}
.sign b{display:block;margin-bottom:6px;font:400 1.15rem/1.1 var(--slab);text-transform:uppercase}
.sign p{margin:0;font-size:.95rem}
.alert{grid-column:1/-1;background:var(--clay);color:var(--bone)}
.alert b{display:block;font:400 1.6rem/1 var(--slab);text-transform:uppercase}
.alert p{margin:6px 0 0;font-size:1.05rem}
.safety{grid-template-columns:1fr}
.safebox{background:var(--ochre)}
.safebox p{margin:0;max-width:36rem;font-size:1.08rem}

/* contact */
.contact{grid-template-columns:1fr}
.c-phone{background:var(--clay);color:var(--bone)}
.c-phone b{display:block;font:400 clamp(2rem,9vw,3rem)/1.1 var(--slab)}
.c-mail{background:var(--ochre)}
.c-mail b,.c-addr b{display:block;margin-top:4px;font-size:1.15rem;overflow-wrap:anywhere}
.c-addr{background:var(--oat)}
.c-mail:hover,.c-phone:hover{background:var(--char);color:var(--bone)}
.c-map{padding:0;min-height:280px}
.c-map iframe{display:block;width:100%;height:100%;min-height:280px;border:0}
.foot .box{margin:0;background:var(--char);color:var(--oat);font-size:.88rem;border-top:0}
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:15px;border-top:var(--line) solid var(--char);background:var(--clay);color:var(--bone);font:400 1.15rem var(--slab);text-align:center;text-transform:uppercase}

@media(min-width:700px){
  .services{grid-template-columns:repeat(2,1fr)}
  .signs{grid-template-columns:repeat(4,1fr)}
  .head{grid-template-columns:repeat(4,1fr)}
  .brand,.phone{grid-column:1/-1}
}
@media(min-width:1000px){
  body{padding-bottom:0}
  .callbar{display:none}
  .head{grid-template-columns:2fr repeat(4,1fr) 2fr}
  .brand,.phone{grid-column:auto}
  .navbox{display:flex;align-items:center;justify-content:center}
  .phone{display:flex;align-items:center;justify-content:center;font-size:1.9rem}
  .hero{grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto}
  .h1box{grid-column:1/4;grid-row:1/3;padding:48px 40px}
  .hero .imgbox{grid-column:4;grid-row:1/4}
  .hero .imgbox img{min-height:0}
  .callbox{grid-column:1/3;grid-row:3}
  .addrbox{grid-column:3;grid-row:3}
  .box{padding:30px 28px}
  .services{grid-template-columns:repeat(3,1fr)}
  .safety{grid-template-columns:1.2fr .8fr}
  .safebox{padding:48px 40px}
  .contact{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto)}
  .c-map{grid-column:2;grid-row:1/4}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}