/* Original HoboHost Cloudflare ribbon, shared by the refreshed page headers. */
.hh-hero-layout, .hc-hero-grid { position:relative; }
.hh-certified-banner {
 position:absolute; z-index:1; left:650px; width:142px; height:155px;
 margin:0; padding:15px 17px 0; color:#fff; text-align:center;
 font:11px/1.4 'AvenirNextLTPro-Regular',Arial,sans-serif;
 text-transform:uppercase; background:url('../img/arrow1.png') center top / 100% 100% no-repeat;
}
.hh-features-page main .hh-certified-banner, .hh-contact-page main .hh-certified-banner { line-height:1.4; }
.hh-certified-banner svg { display:block; width:100%; height:auto; margin:0 auto 5px; }
.hh-certified-banner span { font:16px/1.2 'AvenirNextLTPro-Medium',Arial,sans-serif; }
.hh-feature-hero .hh-certified-banner { top:-32px; }
.hc-hero .hh-certified-banner { top:-28px; }
@media(min-width:1200px) {
 .hc-hero-grid > div:first-of-type > .hc-eyebrow, .hc-hero-grid > div:first-of-type > h1,
 .hc-hero-grid > div:first-of-type > .hc-tagline { max-width:600px; }
}
@media(min-width:992px) and (max-width:1199px) {
 .hh-certified-banner { left:540px; width:115px; height:126px; padding:10px 13px 0; font-size:9px; }
 .hh-certified-banner span { font-size:13px; }
 .hh-feature-hero .hh-hero-copy { max-width:515px; }
 .hc-hero-grid { grid-template-columns:minmax(0,515px) 1fr; gap:135px; }
}
@media(min-width:768px) and (max-width:991px) {
 .hh-certified-banner { left:auto; right:15px; width:100px; height:109px; padding:7px 10px 0; font-size:8px; }
 .hh-certified-banner span { font-size:11px; }
 .hh-hero-art, .hc-art { padding-top:86px; }
 .hh-hero-art::before, .hc-art::before { top:98px; }
}
@media(max-width:767px) {
 .hh-certified-banner { left:auto; right:15px; width:100px; height:109px; padding:7px 10px 0; font-size:8px; }
 .hh-certified-banner span { font-size:11px; }
 .hh-certified-banner svg { margin-bottom:3px; }
 .hh-feature-hero .hh-certified-banner { top:-27px; }
 .hc-hero .hh-certified-banner { top:-26px; }
 .hh-hero-copy > .hh-eyebrow, .hh-hero-copy > h1,
 .hc-hero-grid > div:first-of-type > .hc-eyebrow, .hc-hero-grid > div:first-of-type > h1 { max-width:calc(100% - 110px); }
 .hc-hero-grid > div:first-of-type > .hc-tagline { margin-top:16px; }
}

/* Keep desktop hero artwork clear of the Cloudflare ribbon. */
@media(min-width:992px) {
 .hh-feature-hero .hh-hero-art img { transform:translateX(60px); }
 .hh-feature-hero .hh-hero-art::before { margin-left:60px; }
 .hc-hero .hc-art img { transform:translateX(16px); }
 .hc-hero .hc-art::before { margin-left:16px; }
}

/* Give the refreshed page mascots one shared scale, including their backdrops.
   Their original transparent canvases have comparable visible artwork bounds. */
@media(min-width:768px) {
 .hh-feature-hero .hh-hero-art img, .hp-hero .hp-art img,
 .hc-hero .hc-art img, .hf-hero .hf-art img {
  width:270px; max-width:100%; height:auto; max-height:none;
 }
 .hh-feature-hero .hh-hero-art::before, .hp-hero .hp-art::before,
 .hc-hero .hc-art::before, .hf-hero .hf-art::before {
  width:235px; height:235px; top:14px;
 }
}
@media(min-width:768px) and (max-width:991px) {
 .hh-feature-hero .hh-hero-art img, .hp-hero .hp-art img,
 .hc-hero .hc-art img, .hf-hero .hf-art img { width:245px; }
 .hh-feature-hero .hh-hero-art::before, .hp-hero .hp-art::before,
 .hc-hero .hc-art::before, .hf-hero .hf-art::before {
  width:215px; height:215px; top:98px;
 }
}
@media(max-width:767px) {
 .hh-feature-hero .hh-hero-art img, .hc-hero .hc-art img { width:175px; max-width:100%; max-height:none; }
 .hh-feature-hero .hh-hero-art::before, .hc-hero .hc-art::before { width:150px; height:150px; top:7px; }
}