/* Hoosier Man HVAC and Plumbing, client layer.
   Concept: his wheel mark turns fire, water, ice and a fan blade around one
   hub, so the page turns the same way. Flames rise into the dark form band,
   drips fall into the light bands, a fan blade sweep cuts the big seams, and
   the four quarter colours mark the nav and every heading.
   Colours, all sampled from images/logo.png (sha256 36e2fa02...):
     brand dark #060F18, derived from the navy ring #2C65A8
     flame #C15200, derived from the inner flame #EF6600
     amber flame #FFB31A, flame #EF6600
     ice #5EB8EF, the snowflake quarter
     water #2C65A8, the navy ring behind the drop
     blade grey #D7D7DD, the fan blades
     ice tint #EEF6FC, derived from the snowflake quarter
   Shape system: crescent fan blades become the sweep seams; flame tongues
   become the seam rising into the form band; the water drop becomes drips;
   the forked snowflake spokes become the notch on the areas band; the four
   quarters become the split bar; the hub ring frames the why medallions.
   Devices: 1 brand shape system, 3 seams cut from the mark, 4 ghost wheel
   texture, 6 photo top hero, 7 review count in ice, 8 fire and water CTA split.
   References, by file: home-375x740-scroll0.png (photo top hero, round mark
   in the dark header), playbook tile d-02.png (layered sweep with a lip, hard
   offset shadows), playbook hero.png (one logo shape on every control),
   playbook tile m-03.png (a notch seam on the phone). */

:root{
  --hm-dark:#060F18;
  --hm-flame:#C15200;
  --hm-amber:#FFB31A;
  --hm-fire:#EF6600;
  --hm-ice:#5EB8EF;
  --hm-water:#2C65A8;
  --hm-blade:#D7D7DD;
  --hm-tint:#EEF6FC;
  --hm-split:linear-gradient(90deg,var(--hm-amber) 0 25%,var(--hm-fire) 25% 50%,var(--hm-ice) 50% 75%,var(--hm-water) 75% 100%);
}

/* every band keeps its words above the shapes */
.band:not(.band--hero):not(.band--nav) > .shell{position:relative;z-index:1}

/* the alternate bands take his ice tint, not a flat grey */
.band--alt[data-ground],.band--trust-strip[data-ground]{background-color:var(--hm-tint)}

/* call bar: flame means estimate, water means call */
.callbar__call{box-shadow:inset 0 3px 0 var(--hm-ice)}

/* nav: the four quarter split bar along its bottom edge */
.band--nav[data-ground]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background-color:var(--hm-water);background-image:var(--hm-split);pointer-events:none}

/* hero: the review count in ice on the dark, the hard offset on the pair */
.band--hero p.hero__count{color:var(--hm-ice)}
@media (max-width:767px){.band--hero .hero__sub{line-height:1.5}}

/* headings: a short four quarter bar under every band title */
.band__title::after{content:"";display:block;width:96px;height:6px;margin:14px auto 0;border-radius:3px;background-color:var(--hm-water);background-image:var(--hm-split);pointer-events:none}
.band__title--left::after{margin-left:0}

/* buttons: flame fill means estimate, water outline means call, both with a
   hard offset shadow for sticker energy */
.btn--primary{box-shadow:4px 4px 0 var(--hm-dark)}
.band[data-ground="dark"] .btn--primary{box-shadow:4px 4px 0 var(--hm-water)}
.band[data-ground="light"] .btn--ghost{border:3px solid var(--hm-water);color:var(--hm-water);box-shadow:4px 4px 0 var(--hm-dark)}
.band[data-ground="light"] .btn--ghost:hover{background-color:var(--hm-water);color:#FFFFFF;border-color:var(--hm-water)}
.band[data-ground="dark"] .btn--ghost{border:3px solid var(--hm-ice);color:#FFFFFF;box-shadow:4px 4px 0 var(--hm-water)}
.band[data-ground="dark"] .btn--ghost:hover{background-color:var(--hm-ice);color:var(--hm-dark);border-color:var(--hm-ice)}

/* trust strip: a fan blade sweep with a grey blade lip cuts in from the hero
   above, and rounded water drips in ice and water blue hang from its bottom into services */
.band--trust-strip[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;
  background-image:radial-gradient(120% 100% at 30% 0,var(--hm-dark) 0 58%,var(--hm-blade) 58.5% 66%,transparent 66.5%)}
.band--trust-strip[data-ground]{padding-top:calc(var(--shell-y) + 18px)}
.band--trust-strip[data-ground]::after{content:"";position:absolute;left:0;right:0;bottom:-22px;height:22px;pointer-events:none;z-index:2;
  background-image:radial-gradient(circle at 50% 0,var(--hm-ice) 0 11px,transparent 11.5px),radial-gradient(circle at 50% 0,var(--hm-water) 0 7px,transparent 7.5px);
  background-size:56px 22px,56px 16px;background-position:0 0,28px 0;background-repeat:repeat-x}
.band--services[data-ground]{padding-top:calc(var(--shell-y) + 14px)}

/* services: each card wears one quarter of the wheel as its hard shadow */
.svc{border:2px solid var(--hm-dark);border-radius:14px;box-shadow:6px 6px 0 var(--hm-ice)}
.svc:nth-child(2){box-shadow:6px 6px 0 var(--hm-fire)}
.svc:nth-child(3){box-shadow:6px 6px 0 var(--hm-water)}
.svc:nth-child(4){box-shadow:6px 6px 0 var(--hm-amber)}

/* form and about: flame tongues rise from its top edge into services, with
   an amber rim behind the dark, and ghost hub rings sit behind the words */
.band--form-about[data-ground]{background-color:var(--hm-dark);
  background-image:radial-gradient(circle at 88% 30%,transparent 0 70px,rgba(255,255,255,.05) 71px 96px,transparent 97px 150px,rgba(94,184,239,.05) 151px 160px,transparent 161px)}
.band--form-about[data-ground]::before,.band--form-about[data-ground]::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.band--form-about[data-ground]::before{top:-36px;height:37px;background-color:var(--hm-amber);
  clip-path:polygon(0 100%,0 62%,3% 30%,5% 58%,8% 8%,11% 50%,14% 24%,17% 60%,20% 0,23% 46%,26% 22%,29% 64%,32% 12%,35% 52%,38% 28%,41% 62%,44% 4%,47% 48%,50% 20%,53% 60%,56% 10%,59% 50%,62% 26%,65% 62%,68% 2%,71% 46%,74% 22%,77% 58%,80% 10%,83% 50%,86% 26%,89% 60%,92% 6%,95% 48%,98% 28%,100% 50%,100% 100%)}
.band--form-about[data-ground]::after{top:-24px;height:25px;background-color:var(--hm-dark);
  clip-path:polygon(0 100%,0 50%,4% 14%,7% 60%,10% 20%,13% 66%,16% 6%,19% 58%,22% 30%,25% 70%,28% 10%,31% 60%,34% 24%,37% 66%,40% 2%,43% 56%,46% 18%,49% 62%,52% 8%,55% 58%,58% 22%,61% 68%,64% 4%,67% 56%,70% 16%,73% 62%,76% 6%,79% 58%,82% 20%,85% 66%,88% 4%,91% 54%,94% 22%,97% 60%,100% 30%,100% 100%)}

/* why: water drips fall from the dark form band above, and each reason gets
   a hub ring medallion in one quarter colour */
.band--why[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;pointer-events:none;
  background-image:radial-gradient(circle at 50% 0,var(--hm-dark) 0 10px,transparent 10.5px),radial-gradient(circle at 50% 0,var(--hm-dark) 0 6px,transparent 6.5px);
  background-size:64px 20px,64px 14px;background-position:0 0,32px 0;background-repeat:repeat-x}
.band--why[data-ground]{padding-top:calc(var(--shell-y) + 14px)}
.why__head::before{content:"";display:inline-block;width:18px;height:18px;margin-right:10px;vertical-align:-1px;border-radius:50%;border:5px solid var(--hm-ice);background-color:var(--hm-blade);pointer-events:none}
.why__item:nth-child(2) .why__head::before{border-color:var(--hm-fire)}
.why__item:nth-child(3) .why__head::before{border-color:var(--hm-water)}
.why__item:nth-child(4) .why__head::before{border-color:var(--hm-amber)}

/* gallery: photos with soft corners like his round mark */
.gal__item{border-radius:12px;overflow:hidden}

/* reviews: a fan blade sweep with a flame lip cuts in from the gallery above,
   and the ghost hub rings sit behind the cards */
.band--reviews[data-ground]{background-color:var(--hm-dark);padding-top:calc(var(--shell-y) + 18px);
  background-image:radial-gradient(circle at 10% 78%,transparent 0 60px,rgba(255,255,255,.05) 61px 84px,transparent 85px 130px,rgba(94,184,239,.05) 131px 140px,transparent 141px)}
.band--reviews[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;
  background-image:radial-gradient(120% 100% at 70% 0,var(--hm-tint) 0 58%,var(--hm-fire) 58.5% 66%,transparent 66.5%)}
.review-card{border-radius:14px;box-shadow:5px 5px 0 var(--hm-water)}

/* areas: the forked snowflake spoke notch, cut in ice tint along the bottom
   edge of the dark reviews band above it */
.band--reviews[data-ground]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;pointer-events:none;
  background-image:linear-gradient(135deg,transparent 0 50%,var(--hm-tint) 50%),linear-gradient(225deg,transparent 0 50%,var(--hm-tint) 50%);
  background-size:32px 16px;background-position:0 0,0 0;background-repeat:repeat-x}
.band--reviews[data-ground]{padding-bottom:calc(var(--shell-y) + 16px)}
.chip{border:2px solid var(--hm-water);border-radius:22px}

/* footer: a fan blade sweep with an ice lip cuts in from the areas band */
.band--footer[data-ground]{padding-top:calc(var(--shell-y) + 18px)}
.band--footer[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;pointer-events:none;
  background-image:radial-gradient(120% 100% at 30% 0,var(--hm-tint) 0 58%,var(--hm-ice) 58.5% 66%,transparent 66.5%)}

/* legal: flat on purpose, a rest beat */

/* nav on a desktop: his two line name sits smaller beside the wheel so the
   links and both buttons stay on the screen */
@media (min-width:1180px){.nav__wordmark{font-size:18px;line-height:1.15;white-space:normal;max-width:180px;font-family:var(--font-display)}}
@media (min-width:1180px) and (max-width:1279px){.nav__links{gap:6px}.nav__wordmark{font-size:16px;max-width:140px}}

/* contact panel: his fire, ice and water service rows, each icon sized */
.contact-panel__info{display:flex;gap:12px;margin-top:12px;font-family:var(--font-body)}
.contact-panel__info svg{width:22px;height:22px;flex:none;color:var(--hm-ice)}