/* Honest Air AC Services: flat natural colour blocks */
:root{--paper:#E7E1D3;--bone:#F7F4ED;--stone:#5D7078;--wheat:#E3C68B;--ink:#1E2A2E;--gap:12px;
  --display:"Dela Gothic One",Impact,sans-serif;--sans:"Schibsted Grotesk",Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:400 17px/1.55 var(--sans);color:var(--ink);background:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 .8em}
h1,h2,h3{margin:0 0 .45em;font-family:var(--display);font-weight:400;line-height:1.04}
h1{font-size:clamp(2.4rem,9vw,5rem)}
h2{font-size:clamp(1.7rem,5vw,2.6rem)}
h3{font-size:1.2rem}
small{display:block;font:700 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
.page{max-width:1240px;margin:0 auto;padding:var(--gap)}
.page>*+*{margin-top:var(--gap)}
main>*+*{margin-top:var(--gap)}
.b{padding:24px 22px;background:var(--bone)}

/* header */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:var(--gap) 0;background:var(--paper)}
.b-brand{background:var(--wheat);font:400 1.35rem/1 var(--display)}
.b-brand small{margin-top:6px;font-family:var(--sans)}
.b-ring{background:var(--ink);color:var(--wheat);font:400 1.2rem/1.1 var(--display)}
.b-ring small{margin-bottom:4px;color:var(--bone);font-family:var(--sans)}
.b-nav{grid-column:1/-1;display:flex;gap:20px;overflow-x:auto;padding:14px 20px;background:var(--stone);color:var(--bone);white-space:nowrap;font-weight:700}
.b-nav a:hover{color:var(--wheat)}
.top .b{padding:14px 18px}

/* hero */
.hero{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.b-head{background:var(--ink);color:var(--bone)}
.tag{display:inline-block;margin-bottom:16px;padding:5px 10px;background:var(--wheat);color:var(--ink);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.lead{max-width:34rem;font-size:1.1rem;color:#D8D4C8}
.btn{display:inline-block;margin-top:8px;padding:16px 26px;background:var(--wheat);color:var(--ink);font:400 1.05rem var(--display);transition:background .15s}
.btn:hover{background:var(--bone)}
.b-photo{padding:0;overflow:hidden}
.b-photo img{width:100%;height:100%;min-height:240px;object-fit:cover}
.b-rule b{display:block;margin-bottom:6px;font:400 1.15rem/1.1 var(--display)}
.b-rule p{margin:0}
.r1{background:var(--wheat)}
.r2{background:var(--stone);color:var(--bone)}
.r3{background:var(--bone)}

/* services bento */
.bento{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.b-title{grid-column:1/-1;margin:0;background:var(--stone);color:var(--bone)}
.bento article p,.bento article h3{margin-bottom:.4em}
.bento article p{margin:0}
.s1{background:var(--ink);color:var(--bone)}
.s2{background:var(--wheat)}
.s3{background:var(--bone)}
.s4{background:var(--stone);color:var(--bone)}
.s5{background:var(--wheat)}
.s6{background:var(--ink);color:var(--bone)}
.s7{margin:0;padding:0;background:var(--bone)}
.s7 img{width:100%;height:230px;object-fit:cover}
.s7 figcaption{padding:16px 22px;font-weight:700;background:var(--bone)}

/* repair or replace */
.decide{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.d-fix{background:var(--bone)}
.d-new{background:var(--ink);color:var(--bone)}
.decide li{padding:11px 0;border-top:2px solid currentColor}
.decide li:last-child{border-bottom:2px solid currentColor}
.d-call{grid-column:1/-1;background:var(--wheat);font:400 1.2rem/1.25 var(--display)}
.d-call:hover{background:var(--stone);color:var(--bone)}

/* contact */
.reach{display:grid;grid-template-columns:1fr;gap:var(--gap)}
.c-phone{background:var(--wheat);font:400 clamp(2.2rem,10vw,4.4rem)/1 var(--display)}
.c-phone small{margin-bottom:8px;font-family:var(--sans)}
.c-mail{background:var(--stone);color:var(--bone);font:700 1.15rem var(--sans);overflow-wrap:anywhere}
.c-addr{background:var(--ink);color:var(--bone);font:700 1.15rem var(--sans)}
.c-mail small,.c-addr small{margin-bottom:6px;color:var(--wheat)}
.c-phone:hover{background:var(--bone)}
.c-map{padding:0;min-height:300px}
.c-map iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
.b-foot{background:var(--ink);color:#CFCABB;font-size:.88rem}
.b-foot p{margin:0}
.b-foot a{color:var(--wheat)}

@media(min-width:760px){
  .top{grid-template-columns:auto 1fr auto;align-items:stretch}
  .b-nav{grid-column:auto;grid-row:1;grid-column:2;justify-content:center;align-items:center;gap:32px}
  .b-ring{grid-column:3}
  .bento{grid-template-columns:repeat(6,1fr)}
  .s1,.s2{grid-column:span 3}
  .s3,.s4,.s5{grid-column:span 2}
  .s6,.s7{grid-column:span 3}
  .decide{grid-template-columns:1fr 1fr}
  .reach{grid-template-columns:1fr 1fr}
  .c-phone,.c-map{grid-column:1/-1}
}
@media(min-width:1000px){
  .hero{grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto}
  .b-head{grid-column:1/8;grid-row:1;padding:52px 44px}
  .b-photo{grid-column:8/13;grid-row:1}
  .b-photo img{min-height:0}
  .r1{grid-column:1/5;grid-row:2}
  .r2{grid-column:5/9;grid-row:2}
  .r3{grid-column:9/13;grid-row:2}
  .b{padding:30px 28px}
  .top .b{padding:16px 22px}
  .s7 img{height:100%;min-height:260px}
  .s7{position:relative}
  .b-title{padding:30px 28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}