/* Mendez Plumbing Service, client layer
   Concept: the page is built from the parts of his badge logo, the steel shield,
   the two red pipe wrenches crossed in a V and the blue ribbon with swallowtail ends.
   Colours, all from images/logo.png (sha256 4b4cd88b46e35649a387f0d3d11a039e4b6bb0d48ab831408ce298db410c5681):
     steel #2B2D30, derived from the shield grey #888989 walked dark
     wrench red #E00101, derived from the logo red #FE0103 for white text at 5.03 to 1
     ribbon blue #01A8E1, sampled from the ribbon and the lettering
     ribbon tint #E6F6FC, the ribbon blue at 10 percent
     ink #1C1D1F, the dark outline round his letters
   Shape system: the ribbon swallowtail cuts both ends of every button, eyebrow and chip;
   the shield point closes the hero; the crossed wrenches become a red and blue V over the
   reviews; the red and blue split rule sits under the nav, every heading and the footer;
   the dark outline round his letters becomes a hard offset shadow on cards and buttons.
   Devices: 1 brand shape system, 3 dividers, 4 a ghost shield texture, 7 trust stacking,
   8 a two colour intent split (red means call, blue means free estimate).
   Borrowed treatments, from the reference captures named in art-direction.json: ribbon pennant
   buttons, badge shaped tags, an angled cut on a band edge, the logo on a white header. */

:root{
  --mz-steel:#2B2D30;
  --mz-red:#E00101;
  --mz-blue:#01A8E1;
  --mz-tint:#E6F6FC;
  --mz-ink:#1C1D1F;
  --mz-tail:12px;
  --mz-split:linear-gradient(90deg,var(--mz-red) 0 50%,var(--mz-blue) 50% 100%);
}

/* the badge words in the display face, so the rating line sets as one word */
.rbadge text{font-family:var(--font-display)}

/* call bar: blue asks for the estimate, red calls him, the same on every pair */
.callbar__book{background-color:var(--mz-blue);color:var(--mz-ink)}
.callbar__call{background-color:var(--mz-red);color:#FFFFFF;border-top:0}

/* nav: his badge logo larger on the white header, the split rule under it */
.band--nav[data-ground]{border-bottom:0;box-shadow:none}
.band--nav[data-ground]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background-image:var(--mz-split);background-color:var(--mz-red);pointer-events:none}
.nav__logo img{height:72px;max-width:120px}
@media(min-width:1025px){.nav__logo img{height:84px;max-width:140px}}

/* buttons: the ribbon swallowtail at both ends, the dark outline as a hard shadow */
.ctapair{filter:drop-shadow(4px 4px 0 var(--mz-ink))}
.band[data-ground="dark"] .ctapair{filter:drop-shadow(4px 4px 0 #000000)}
.ctapair .btn,.nav__actions .btn{clip-path:polygon(0 0,100% 0,calc(100% - var(--mz-tail)) 50%,100% 100%,0 100%,var(--mz-tail) 50%);border:0;padding-left:calc(1.6em + var(--mz-tail));padding-right:calc(1.6em + var(--mz-tail));border-radius:0}
.ctapair .btn--primary,.nav__actions .btn--primary,.band[data-ground] .ctapair .btn--primary{background-color:var(--mz-blue);color:var(--mz-ink);border:0}
.ctapair .btn--ghost,.nav__actions .btn--ghost,.band[data-ground] .ctapair .btn--ghost,.hero--angular .ctapair .btn--ghost,.nav--light .nav__actions .btn--ghost{background-color:var(--mz-red);color:#FFFFFF;border:0}
.ctapair .btn--primary:hover,.nav__actions .btn--primary:hover,.band[data-ground] .ctapair .btn--primary:hover{background-color:var(--mz-red);color:#FFFFFF}
.ctapair .btn--ghost:hover,.nav__actions .btn--ghost:hover,.band[data-ground] .ctapair .btn--ghost:hover{background-color:var(--mz-blue);color:var(--mz-ink)}

/* eyebrows: a short blue ribbon with swallowtail ends, like the 15 YEARS ribbon */
.band[data-ground] .eyebrow{display:inline-block;background-color:var(--mz-blue);color:var(--mz-ink);padding:5px calc(14px + var(--mz-tail));clip-path:polygon(0 0,100% 0,calc(100% - var(--mz-tail)) 50%,100% 100%,0 100%,var(--mz-tail) 50%);letter-spacing:.14em}

/* headings: the red and blue split rule under every band title */
.band__title::after{content:"";display:block;width:84px;height:6px;margin:14px auto 0;background-image:var(--mz-split);background-color:var(--mz-red);pointer-events:none}
.band__head .lede.center,.band__head .lede{margin-left:auto;margin-right:auto}
.band__head--left .lede{margin-left:0}
.band__head--left .band__title::after,.split__prose .band__title::after{margin-left:0}

/* hero: the steel band closes in the point of his shield */
.band--hero[data-ground]{clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),50% 100%,0 calc(100% - 34px));padding-bottom:calc(var(--shell-y) + 34px)}
.band--hero .hero__count{text-decoration:underline;text-decoration-color:var(--mz-blue);text-decoration-thickness:3px;text-underline-offset:7px}
.band--hero .checks__item svg{color:var(--mz-blue)}
.ctapair .btn{white-space:nowrap}
@media(max-width:1024px){.band--hero.hero--photo-top[data-ground]{padding-bottom:30px}}
@media(max-width:767px){.band--hero.hero--photo-top .hero__media{height:250px}.band--hero.hero--photo-top .hero__inner{padding-top:12px}.band--hero .rbadges{margin-bottom:6px}.band--hero .hero__title{margin-bottom:.2em}.band--hero .hero__count{margin-bottom:.7em}.band--hero .hero__sub{margin-bottom:.6em;line-height:1.6}.band--hero .checks{margin-bottom:12px}}
@media(max-width:767px){.band--hero.hero--angular .ctapair{grid-template-columns:1fr;gap:12px}.band--hero.hero--angular .ctapair .btn{width:100%;min-height:52px;font-size:var(--fs-btn)}}

/* trust strip: tucked under the hero point so the point lands on the strip grey, each proof in a small shield */
.band--hero[data-ground]{position:relative;z-index:2}
.band--trust-strip[data-ground]{margin-top:-34px;padding-top:calc(34px + 1.4em)}
.strip__item{align-items:center}
.strip__icon{background-color:var(--mz-steel);color:#FFFFFF;clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%);padding:8px 8px 12px}

/* services: cards outlined like his letters with a hard blue shadow */
.svc{border:2px solid var(--mz-ink);border-radius:0;box-shadow:7px 7px 0 var(--mz-blue)}
.svc:hover{box-shadow:7px 7px 0 var(--mz-red)}
.svc__photo{border-bottom:5px solid var(--mz-blue)}
.svc__more{color:var(--mz-ink);text-decoration:underline;text-decoration-color:var(--mz-blue);text-decoration-thickness:3px;text-underline-offset:5px}

/* form and about: steel band, a slanted top and the ribbon swallowtail notch cut into its foot */
.band--form-about[data-ground]{background-color:var(--mz-steel);clip-path:polygon(0 0,100% 30px,100% 100%,50% calc(100% - 30px),0 100%);padding-top:calc(var(--shell-y) + 30px);padding-bottom:calc(var(--shell-y) + 30px)}
.band:not(.band--hero) > .shell{position:relative;z-index:1}
.band--form-about .contact-panel{align-self:center;padding:32px;border:2px solid var(--mz-blue);box-shadow:7px 7px 0 #000000;background-color:#232528}
.split,.split__prose,.split__form,.contact-panel{min-width:0}
.contact-panel a,.split__prose a{overflow-wrap:anywhere}
.contact-panel svg{width:22px;height:22px;flex:none;margin-right:10px;color:var(--mz-blue)}

/* why: each reason in a blue shield medallion; red is kept for the call */
.why{padding-left:0;margin-left:0;list-style:none}
.why__item{border-left:0;padding-left:0;margin-left:0}
.why__icon{display:flex;align-items:center;justify-content:center;width:56px;height:64px;margin-bottom:12px;background-color:var(--mz-blue);color:var(--mz-ink);clip-path:polygon(0 0,100% 0,100% 62%,50% 100%,0 62%)}
.why__icon svg{width:28px;height:28px;margin-top:-6px}

/* gallery: plain on purpose, a rest beat on the ribbon tint */
.band--gallery[data-ground]{background-color:var(--mz-tint)}
.gal__item{border:2px solid var(--mz-ink);border-radius:0}

/* reviews: the two wrenches cross in a red and blue V over the top, and the band closes in the shield point */
.band--reviews[data-ground]{background-color:var(--mz-steel);padding-top:calc(var(--shell-y) + 26px)}
.band--reviews[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;background-image:var(--mz-split);background-color:var(--mz-red);clip-path:polygon(0 0,50% calc(100% - 12px),100% 0,100% 12px,50% 100%,0 12px);pointer-events:none;z-index:0}
.band--reviews[data-ground]{position:relative;z-index:2;clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),50% 100%,0 calc(100% - 34px));padding-bottom:calc(var(--shell-y) + 34px)}
.band--areas[data-ground]{margin-top:-34px;padding-top:calc(var(--shell-y) + 34px)}
.review-card{border-radius:0;box-shadow:7px 7px 0 var(--mz-blue)}
.band--reviews[data-ground] .ctapair .btn--ghost{background-color:#FFFFFF;color:var(--mz-ink)}
.band--reviews[data-ground] .ctapair .btn--ghost:hover{background-color:var(--mz-blue);color:var(--mz-ink)}

/* areas: chips cut like the ribbon on the ribbon tint */
.band--areas[data-ground]{background-color:var(--mz-tint);background-image:radial-gradient(circle,rgba(1,168,225,.22) 1.5px,transparent 2px);background-size:16px 16px}
.chip svg{color:var(--mz-blue)}
.foot__item svg,.contact-panel svg{color:var(--mz-blue)}
.foot__item a{overflow-wrap:anywhere}
.chip{border:2px solid var(--mz-ink);border-radius:0;box-shadow:4px 4px 0 var(--mz-blue);background-color:#FFFFFF}

/* footer: the split rule as a two tone bar across the top */
.band--footer[data-ground]{background-color:var(--mz-steel)}
.band--footer[data-ground]::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background-image:var(--mz-split);background-color:var(--mz-red);pointer-events:none}
.map{background-color:var(--mz-tint);background-image:radial-gradient(circle,rgba(1,168,225,.35) 1.5px,transparent 2px);background-size:14px 14px}
.foot__logo img{background-color:#FFFFFF;padding:8px;border-radius:0;box-shadow:4px 4px 0 var(--mz-blue)}