/* HM Hero System 1.1.62 - shared responsive layout and original card geometry. */
.hmhs-hero,
.hmhs-hero * { box-sizing:border-box; }
.hmhs-hero {
  --hmhs-bg:#FAF8F2; --hmhs-title:#00A075; --hmhs-check:#00A075;
  --hmhs-primary-bg:#EB5B25; --hmhs-primary-color:#FFFFFF;
  --hmhs-primary-hover-bg:#FFF3EC; --hmhs-primary-hover-color:#EB5B25;
  --hmhs-primary-border:#EB5B25;
  --hmhs-side-padding:2.5rem; --hmhs-text-width:57%;
  --hmhs-card-gap:.6rem; --hmhs-card-max-width:16.5rem; --hmhs-card-overlap:2rem;
  --hmhs-friend-max-width:33rem;
  position:relative; left:50%; transform:translateX(-50%);
  width:100vw; max-width:100vw; margin:0;
  background:var(--hmhs-bg); color:#203839; isolation:isolate;
  font-family:inherit; overflow:hidden; line-height:1.45;
}
.hmhs-hero .hmhs-flow {
  position:relative; display:flex; flex-direction:column;
  width:min(1390px,calc(100% - var(--hmhs-side-padding) - var(--hmhs-side-padding))); min-height:0;
  margin:0 auto; padding:0 0 2.0rem;
}
/* Landscape: the real image aspect ratio sets the minimum text-stage height.
   Extra text height is filled by the same photo rather than exposing a blank
   warm-white band above the picture. The photo remains behind the fade. */
.hmhs-hero .hmhs-photo-stage { position:relative; display:flex; flex-direction:column; flex-shrink:0; min-height:0; padding:3.2rem 0 3.55rem; }
/* Keeps prior flex ordering exactly as before unless the portrait minimum
   height is explicitly enabled for a naturally sorted photo/copy section. */
.hmhs-hero .hmhs-copy-stack { display:contents; }
.hmhs-hero .hmhs-block { position:relative; z-index:1; min-width:0; margin:0 0 .8rem; }
/* Only actual flow/stage last children lose their trailing margin. The
   added display:contents copy wrapper must not falsely mark its last text
   item as the end of the whole photo stage. */
.hmhs-hero .hmhs-flow > .hmhs-block:last-child,
.hmhs-hero .hmhs-photo-stage > .hmhs-block:last-child { margin-bottom:0 !important; }
.hmhs-hero .hmhs-photo-stage:not(:has(> .hmhs-block--image)) > .hmhs-copy-stack > .hmhs-block:last-child { margin-bottom:0 !important; }
.hmhs-hero .hmhs-block--eyebrow,
.hmhs-hero .hmhs-block--title,
.hmhs-hero .hmhs-block--intro,
.hmhs-hero .hmhs-block--description,
.hmhs-hero .hmhs-block--benefits,
.hmhs-hero .hmhs-block--actions { width:var(--hmhs-text-width,57%); max-width:100%; }
.hmhs-hero .hmhs-eyebrow { font-size:.88rem; letter-spacing:.01em; color:#173b3d; font-weight:550; margin:0; }
.hmhs-hero .hmhs-h1 { color:var(--hmhs-title); font-size:clamp(2.05rem,3.3vw,3.32rem); font-weight:750; line-height:1.09; margin:0; letter-spacing:-.028em; overflow-wrap:break-word; }
.hmhs-hero .hmhs-intro { color:#16383c; font-size:1.1rem; line-height:1.33; font-weight:470; margin:0; }
.hmhs-hero .hmhs-description { font-size:1rem; line-height:1.48; margin:0; }
.hmhs-hero .hmhs-benefits { display:flex; flex-wrap:wrap; gap:.55rem 1.15rem; padding:0; margin:.9rem 0 0; list-style:none; }
.hmhs-hero .hmhs-benefit { display:inline-flex; gap:.45rem; align-items:center; font-size:.85rem; font-weight:550; }
.hmhs-hero .hmhs-check { width:1.42rem; height:1.42rem; border:1.4px solid var(--hmhs-check); background:#E5F6EF; border-radius:999px; display:inline-grid; place-items:center; flex:none; color:var(--hmhs-check); }
.hmhs-hero .hmhs-check .hmhs-svg { width:68%; height:68%; }
.hmhs-hero .hmhs-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem 1.3rem; margin-top:.6rem; }
.hmhs-hero .hmhs-primary,
.hmhs-hero .hmhs-secondary { display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:2.8rem; padding:.7rem 1rem; border-radius:999px; text-decoration:none; white-space:normal; line-height:1.25; font-size:.92rem; font-weight:700; transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease; }
/* The calculator CTA follows its actual label rather than filling the text column.
   32rem is a legibility cap, not a fixed width: shorter labels stay compact.
   At narrow viewports the available width wins and the label may wrap. */
.hmhs-hero .hmhs-primary { border:1px solid var(--hmhs-primary-border); background:var(--hmhs-primary-bg); color:var(--hmhs-primary-color); }
.hmhs-hero .hmhs-actions .hmhs-primary {
  display:inline-flex !important;
  flex:0 1 auto !important;
  width:fit-content !important;
  max-width:min(100%,32rem) !important;
  min-width:0 !important;
}
/* Long German compound words must never push the label outside the pill.
   Keep icons and arrow intact and allow only the text to wrap as necessary. */
.hmhs-hero .hmhs-actions .hmhs-primary > span {
  min-width:0 !important;
  max-width:100%;
  flex:0 1 auto;
  white-space:normal !important;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.hmhs-hero .hmhs-primary:hover { background:var(--hmhs-primary-hover-bg); color:var(--hmhs-primary-hover-color); border-color:var(--hmhs-primary-border); }
.hmhs-hero .hmhs-secondary { padding-inline:0; border:1px solid transparent; color:#005E52; font-weight:650; background:transparent; }
.hmhs-hero .hmhs-secondary:hover { color:#EB5B25; }
/* No dead links: a missing URL is represented only inside authorized previews. */
.hmhs-hero .hmhs-preview-unlinked { cursor:default; }
.hmhs-hero .hmhs-primary:focus-visible,
.hmhs-hero .hmhs-secondary:focus-visible,
.hmhs-hero .hmhs-card:focus-visible { outline:3px solid #1B7092; outline-offset:3px; }
.hmhs-hero .hmhs-actions .hmhs-svg { width:1.06rem; height:1.06rem; flex-shrink:0; }
.hmhs-hero .hmhs-block--image {
  position:absolute; width:100vw; left:50%; top:var(--hmhs-photo-top,auto); right:auto; bottom:0;
  transform:translateX(-50%); z-index:0; height:var(--hmhs-photo-height,auto);
  margin:0 !important; overflow:hidden; pointer-events:none;
}
.hmhs-hero .hmhs-picture { display:block; position:relative; width:100%; height:var(--hmhs-photo-media-height,auto); }
.hmhs-hero .hmhs-picture img {
  display:block; width:100%; height:var(--hmhs-photo-media-height,auto);
  object-fit:var(--hmhs-photo-fit,contain); object-position:70% 50%;
}
.hmhs-hero .hmhs-block--image::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--hmhs-bg) 0%,var(--hmhs-bg) var(--hmhs-fade-start,32%),transparent var(--hmhs-fade-end,65%)); }
/* Landscape: the card shelf stays near the lower edge of the photo by default.
   A deliberate custom block order can opt out via the per-device inline styles. */
.hmhs-hero .hmhs-block--cards { margin-top:1.65rem; z-index:2; width:100%; }
.hmhs-hero .hmhs-block--cards .hmhs-cards { position:relative; }
/* All card counts are centered; for five cards, equal widths keep the
   card shelf calm and aligned while keeping the real flex-edge gap. */
.hmhs-hero .hmhs-cards {
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:var(--hmhs-card-gap);
}
/* Five cards: equal real flex item widths, never invisible grid columns.
   The saved card maximum stays a cap, and a tighter viewport distributes
   the available width evenly among the five cards without pushing any down. */
.hmhs-hero .hmhs-cards--count-5 {
  display:flex; flex-wrap:nowrap; width:100%; max-width:100%;
  margin-inline:auto; justify-content:center; column-gap:var(--hmhs-card-gap); row-gap:var(--hmhs-card-gap);
}
.hmhs-hero .hmhs-cards--count-5 > .hmhs-card {
  /* Same width for all five; content may wrap but does not resize a card. */
  flex:0 0 auto;
  width:min(var(--hmhs-card-max-width),calc((100% - 4 * var(--hmhs-card-gap)) / 5));
  max-width:100%;
}
.hmhs-hero .hmhs-card-break { display:none; flex:0 0 100%; width:100%; height:0; margin:0; padding:0; pointer-events:none; }
/* Any other active card count (one, two, three, four, six, ...):
   All visible cards use one shared width, regardless of title/price length.
   The shelf is centered and capped to the configured maximum card width.
   At narrow viewports, the shared width shrinks to fit the target column
   count. Flex wrap centers incomplete final rows without stretching cards.
   Five-card layouts continue to use the already verified 5 / 3+2 / 2+2+1
   break markers and their exact existing geometry. */
.hmhs-hero .hmhs-cards:not(.hmhs-cards--count-5) {
  --hmhs-card-columns:min(var(--hmhs-card-count,1),5);
  width:min(100%,calc(var(--hmhs-card-columns) * var(--hmhs-card-max-width) + (var(--hmhs-card-columns) - 1) * var(--hmhs-card-gap)));
  max-width:100%; margin-inline:auto;
}
.hmhs-hero .hmhs-cards:not(.hmhs-cards--count-5) > .hmhs-card {
  flex:0 0 auto;
  width:min(var(--hmhs-card-max-width),calc((100% - (var(--hmhs-card-columns) - 1) * var(--hmhs-card-gap)) / var(--hmhs-card-columns)));
  max-width:100%;
}
@media (min-width:600px) and (max-width:1049px) and (orientation:landscape),
       (min-width:730px) and (max-width:1199px) and (orientation:portrait) {
  .hmhs-hero .hmhs-cards:not(.hmhs-cards--count-5) { --hmhs-card-columns:min(var(--hmhs-card-count,1),3); }
}
@media (min-width:600px) and (max-width:729px) and (orientation:portrait) {
  .hmhs-hero .hmhs-cards:not(.hmhs-cards--count-5) { --hmhs-card-columns:min(var(--hmhs-card-count,1),2); }
}
@media (max-width:599px) {
  .hmhs-hero .hmhs-cards:not(.hmhs-cards--count-5) { --hmhs-card-columns:1; }
}
/* The photo has its real natural end; the cards overlap that end by
   roughly one third of a normal low-profile 6.1rem card (2.05rem).
   No full-width fake mask can hide the woman, dog or cat. */
.hmhs-hero .hmhs-cards::before { content:none; }
.hmhs-hero .hmhs-card {
  position:relative; display:flex; gap:.72rem; align-items:center;
  min-height:6.1rem; min-width:0; padding:1rem .95rem; text-decoration:none;
  flex:0 1 auto; width:fit-content; max-width:min(100%,var(--hmhs-card-max-width)); justify-self:center;
  background:rgba(255,255,255,.95); border:1px solid #E9EFEB; border-radius:15px;
  box-shadow:0 3px 17px rgba(31,68,51,.07); color:#173A3B;
  transition:background-color .14s ease, border-color .14s ease,transform .14s ease,box-shadow .14s ease;
}
.hmhs-hero .hmhs-card:hover { background:#F6FFFB; border-color:#9ADCC4; transform:translateY(-2px); box-shadow:0 4px 18px rgba(31,68,51,.11); }
.hmhs-hero .hmhs-card-icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:3.1rem; height:3.1rem; border-radius:50%; color:#85633D; background:#F3EBE2; }
.hmhs-hero .hmhs-card-icon .hmhs-svg { width:54%; height:54%; }
.hmhs-hero .hmhs-card-icon-img { display:block; max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; border-radius:50%; }
.hmhs-hero .hmhs-card-body { display:flex; flex:1 1 auto; min-width:0; flex-direction:column; align-items:flex-start; align-self:stretch; }
.hmhs-hero .hmhs-card-title { display:block; font-size:.91rem; line-height:1.25; font-weight:750; color:#143C3D; overflow-wrap:anywhere; }
/* The dog/cat health-insurance titles use equivalent optional syllable breaks.
   Preserve deliberate soft-hyphen breaks before emergency word breaking, even
   in the compact five-card viewport where normal titles hyphenate automatically. */
.hmhs-hero .hmhs-card-title--planned-breaks { hyphens:manual !important; -webkit-hyphens:manual !important; overflow-wrap:break-word !important; word-break:normal !important; }
.hmhs-hero .hmhs-card-description { font-size:.78rem; color:#657679; margin-top:.17rem; }
/* Price group stays at the card bottom; extra title/description lines consume space above,
   not between the label and the price. Stretching the body is essential here. */
.hmhs-hero .hmhs-card-label { margin-top:auto; padding-top:.29rem; display:block; font-size:.75rem; color:#6F7C7B; }
.hmhs-hero .hmhs-card-price { display:block; color:#008D6B; font-weight:760; font-size:1.16rem; line-height:1.1; margin-top:.13rem; }
.hmhs-hero .hmhs-card-unit { font-weight:500; font-size:.64em; color:#637779; white-space:nowrap; }
.hmhs-hero .hmhs-card-link { font-size:.8rem; color:#007F63; margin-top:auto; padding-top:.38rem; text-decoration:underline; text-underline-offset:2px; }
.hmhs-hero .hmhs-card-arrow { display:grid; flex-shrink:0; place-items:center; width:1.9rem; height:1.9rem; background:#E4F4EC; color:#007E5F; border-radius:50%; align-self:flex-end; }
.hmhs-hero .hmhs-card-arrow .hmhs-svg { width:1.1rem; height:1.1rem; }
/* Match the note's left edge to the FIRST visible card, not the broad
   Elementor/Hero flow. The card shelf is centered but has a bounded content
   width; use the same max width, gap and responsive column count for its note.
   Unlike absolute offsets, this stays correct at browser zoom and on mobile. */
.hmhs-hero .hmhs-block--cards { --hmhs-footnote-columns:min(var(--hmhs-visible-card-count,1),5); }
.hmhs-hero .hmhs-footnote {
  width:min(100%,calc(var(--hmhs-footnote-columns) * var(--hmhs-card-max-width) + (var(--hmhs-footnote-columns) - 1) * var(--hmhs-card-gap)));
  margin:.6rem auto .05rem; max-width:100%; text-align:left;
  color:#516164; font-size:.69rem; line-height:1.55; overflow-wrap:anywhere;
}
@media (min-width:600px) and (max-width:1049px) and (orientation:landscape),
       (min-width:730px) and (max-width:1199px) and (orientation:portrait) {
  .hmhs-hero .hmhs-block--cards { --hmhs-footnote-columns:min(var(--hmhs-visible-card-count,1),3); }
}
@media (min-width:600px) and (max-width:729px) and (orientation:portrait) {
  .hmhs-hero .hmhs-block--cards { --hmhs-footnote-columns:min(var(--hmhs-visible-card-count,1),2); }
}
@media (max-width:599px) {
  .hmhs-hero .hmhs-block--cards { --hmhs-footnote-columns:1; }
}
.hmhs-hero .hmhs-footnote p { margin:.18rem 0; }
.hmhs-hero .hmhs-block--trust { z-index:2; width:100%; margin-top:.75rem; }
/* Both image groups stay immediately left-aligned. The saved 'between' gap
   is the ONLY horizontal gap between groups; flex space-between MUST NOT
   consume the unused row width when the configured gap is zero. */
.hmhs-hero .hmhs-trust { display:flex; justify-content:flex-start; align-items:flex-start; align-content:flex-start; flex-wrap:wrap; gap:0; }
.hmhs-hero .hmhs-trust-group { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; flex:0 1 auto; gap:.75rem; max-width:100%; }
.hmhs-hero .hmhs-trust-group--money { justify-content:flex-start; }
.hmhs-hero .hmhs-trust-group--service { justify-content:flex-start; }
.hmhs-hero .hmhs-trust-item { display:flex; max-width:100%; width:7.2rem; align-items:center; }
.hmhs-hero .hmhs-trust-group--service .hmhs-trust-item { width:11rem; }
.hmhs-hero .hmhs-trust-item img { display:block; width:100%; max-width:100%; height:auto; object-fit:contain; }
/* At medium landscape widths, five cards form a compact 3+2.
   Two cards in the second row are centered next to each other with the same gap. */
/* 3+2 is an intentional break, not a 4+1 accident. The inert, invisible
   line-break elements do not accept clicks or keyboard focus. No 'ghost'
   grid columns can enlarge the spacing between real card edges. */
@media (min-width:600px) and (max-width:1049px) and (orientation:landscape) {
  .hmhs-hero .hmhs-cards--count-5 {
    width:min(100%,calc(3 * var(--hmhs-card-max-width) + 2 * var(--hmhs-card-gap)));
    flex-wrap:wrap; row-gap:0;
  }
  /* Three cards must actually fit before the forced line break, even when
     a landing page chooses a very large individual maximum card width. */
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card {
    width:min(var(--hmhs-card-max-width),calc((100% - 2 * var(--hmhs-card-gap)) / 3));
  }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-break--after-3 {display:block;}
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card:nth-child(n+6) {margin-top:var(--hmhs-card-gap);}
}
/* At medium landscape widths five compact cards fit without the old 1300px jump. */
@media (min-width:1050px) and (max-width:1399px) and (orientation:landscape) {
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card { gap:.42rem; min-height:5.75rem; padding:.75rem .58rem; }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-icon { width:2.45rem;height:2.45rem; }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-arrow { width:1.65rem;height:1.65rem; }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-title { font-size:.85rem; hyphens:auto; -webkit-hyphens:auto; }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-price { font-size:1.06rem; }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-unit { font-size:.62em; }
}
@media (min-width:600px) and (max-width:1199px) and (orientation:landscape) {
  .hmhs-hero { --hmhs-side-padding:1.5rem; --hmhs-text-width:56%; }
  .hmhs-hero .hmhs-flow { min-height:0; }
  .hmhs-hero .hmhs-photo-stage { padding-top:2.4rem; }
  .hmhs-hero .hmhs-h1 { font-size:clamp(2rem,3.2vw,2.7rem); }
  .hmhs-hero .hmhs-block--eyebrow,.hmhs-hero .hmhs-block--title,
  .hmhs-hero .hmhs-block--intro,.hmhs-hero .hmhs-block--description,
  .hmhs-hero .hmhs-block--benefits,.hmhs-hero .hmhs-block--actions { width:var(--hmhs-text-width,56%); }
  .hmhs-hero .hmhs-card { padding:.9rem .65rem; }
  .hmhs-hero .hmhs-card-icon { width:2.4rem; height:2.4rem; }
}
@media (min-width:600px) and (max-width:1199px) and (orientation:portrait) {
  .hmhs-hero { --hmhs-side-padding:1.5rem; --hmhs-text-width:100%; }
  .hmhs-hero .hmhs-flow { min-height:0; padding:2.5rem 0 1.9rem; }
  .hmhs-hero .hmhs-photo-stage {display:contents;}
  .hmhs-hero .hmhs-block--eyebrow,.hmhs-hero .hmhs-block--title,
  .hmhs-hero .hmhs-block--intro,.hmhs-hero .hmhs-block--description,
  .hmhs-hero .hmhs-block--benefits,.hmhs-hero .hmhs-block--actions { width:var(--hmhs-text-width,100%); }
  .hmhs-hero .hmhs-block--image {
    width:calc(100% + var(--hmhs-side-padding) + var(--hmhs-side-padding)); height:calc(19rem + var(--hmhs-photo-lift,0rem));
    position:relative; inset:auto; transform:none;
    margin-top:calc(var(--hmhs-photo-lift,0rem) * -1) !important;
    margin-right:0 !important;
    margin-bottom:var(--hmhs-photo-base-gap,.7rem) !important;
    margin-left:calc(0px - var(--hmhs-side-padding)) !important;
    z-index:0;
  }
  .hmhs-hero .hmhs-picture,.hmhs-hero .hmhs-picture img {height:100%;}
  .hmhs-hero .hmhs-picture img {object-fit:cover;}
  .hmhs-hero .hmhs-block--image::after { background:linear-gradient(180deg,var(--hmhs-bg) 0%,transparent 24%,transparent 100%); }
  .hmhs-hero .hmhs-h1 { font-size:clamp(2.1rem,5.2vw,3.1rem); }
  .hmhs-hero .hmhs-block--cards { margin-top:1rem; }
  /* Portrait tablets get compact icons/inner gaps; icons remain per-card overridable. */
  .hmhs-hero .hmhs-card { gap:.55rem; padding:.8rem .7rem; }
  .hmhs-hero .hmhs-card-icon { width:2.6rem; height:2.6rem; }
  .hmhs-hero .hmhs-card-arrow { width:1.75rem; height:1.75rem; }
  /* Portrait with enough room: 3+2 instead of the old 2+2+1. */
  .hmhs-hero .hmhs-cards--count-5 {
    width:min(100%,calc(3 * var(--hmhs-card-max-width) + 2 * var(--hmhs-card-gap)));
    flex-wrap:wrap; row-gap:0;
  }
  /* Three cards must actually fit before the forced line break, even when
     a landing page chooses a very large individual maximum card width. */
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card {
    width:min(var(--hmhs-card-max-width),calc((100% - 2 * var(--hmhs-card-gap)) / 3));
  }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-break--after-3 {display:block;}
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card:nth-child(n+6) {margin-top:var(--hmhs-card-gap);}
  .hmhs-hero .hmhs-trust { justify-content:flex-start; }
  .hmhs-hero .hmhs-trust-group { justify-content:flex-start; }
}
/* A narrower portrait tablet uses 2+2+1, with the final card centered. */
@media (min-width:600px) and (max-width:729px) and (orientation:portrait) {
  .hmhs-hero .hmhs-cards--count-5 {
    width:min(100%,calc(2 * var(--hmhs-card-max-width) + var(--hmhs-card-gap)));
    flex-wrap:wrap; row-gap:0;
  }
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card {
    width:min(var(--hmhs-card-max-width),calc((100% - var(--hmhs-card-gap)) / 2));
  }
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-break--after-3 {display:none;}
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-break--after-2,
  .hmhs-hero .hmhs-cards--count-5 .hmhs-card-break--after-4 {display:block;}
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card:nth-child(n+4) {margin-top:var(--hmhs-card-gap);}
}
@media (max-width:599px) {
  .hmhs-hero { --hmhs-side-padding:1.5rem; --hmhs-text-width:100%; }
  .hmhs-hero .hmhs-flow { min-height:0; padding:1.7rem 0 1.7rem; }
  .hmhs-hero .hmhs-photo-stage {display:contents;}
  .hmhs-hero .hmhs-block--eyebrow,.hmhs-hero .hmhs-block--title,
  .hmhs-hero .hmhs-block--intro,.hmhs-hero .hmhs-block--description,
  .hmhs-hero .hmhs-block--benefits,.hmhs-hero .hmhs-block--actions { width:var(--hmhs-text-width,100%); }
  .hmhs-hero .hmhs-h1 { font-size:clamp(1.85rem,7vw,2.6rem); }
  .hmhs-hero .hmhs-eyebrow { font-size:.79rem; }
  .hmhs-hero .hmhs-intro { font-size:1rem; }
  .hmhs-hero .hmhs-benefits { gap:.55rem .8rem; }
  .hmhs-hero .hmhs-actions { align-items:center; justify-content:center; flex-direction:column; gap:.35rem; }
  .hmhs-hero .hmhs-primary { margin-inline:auto; justify-content:center; text-align:center; }
  .hmhs-hero .hmhs-actions .hmhs-primary { align-self:center; }
  .hmhs-hero .hmhs-secondary { width:100%; justify-content:center; text-align:center; }
  .hmhs-hero .hmhs-block--image {
    position:relative; inset:auto; z-index:0; width:calc(100% + var(--hmhs-side-padding) + var(--hmhs-side-padding));
    height:calc(17rem + var(--hmhs-photo-lift,0rem)); transform:none;
    margin-top:calc(var(--hmhs-photo-lift,0rem) * -1) !important;
    margin-right:0 !important;
    margin-bottom:var(--hmhs-photo-base-gap,.5rem) !important;
    margin-left:calc(0px - var(--hmhs-side-padding)) !important;
  }
  .hmhs-hero .hmhs-picture,.hmhs-hero .hmhs-picture img {height:100%;}
  .hmhs-hero .hmhs-picture img {object-fit:cover;}
  .hmhs-hero .hmhs-block--image::after { background:linear-gradient(180deg,var(--hmhs-bg) 0%,transparent 25%,transparent 100%); }
  .hmhs-hero .hmhs-block--cards { margin-top:.65rem; }
  .hmhs-hero .hmhs-cards--count-5 { display:flex; flex-direction:column; align-items:center; width:100%; }
  .hmhs-hero .hmhs-card { width:100%; flex-basis:auto; min-height:5.2rem; padding:.85rem; max-width:min(100%,var(--hmhs-card-max-width)); }
  .hmhs-hero .hmhs-cards--count-5 > .hmhs-card {width:min(100%,var(--hmhs-card-max-width));}
  .hmhs-hero .hmhs-trust { justify-content:flex-start; gap:0; }
  .hmhs-hero .hmhs-trust-group { width:auto; justify-content:flex-start; }
  .hmhs-hero .hmhs-trust-group--service .hmhs-trust-item { width:9rem; }
  .hmhs-hero .hmhs-footnote { font-size:.74rem; }
}
/* Portrait tablet and phone: PRODUCT/ANIMAL ICON STAYS ABOVE THE TITLE, never
   in the price row. The title, optional description and price label span the whole
   card inside width. Only the separate ARROW shares the bottom row with the monthly
   contribution. A flexible description/spacer track pins the price rows to the
   bottom of equal-height cards without a wasteful dedicated arrow row.
   Desktop and landscape tablets intentionally keep their earlier styling. */
@media (min-width:600px) and (max-width:1199px) and (orientation:portrait),
       (max-width:599px) {
  .hmhs-hero .hmhs-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "icon icon"
      "title title"
      "desc desc"
      "label label"
      "price arrow";
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
    align-items:start;
    column-gap:.5rem;
    row-gap:0;
  }
  .hmhs-hero .hmhs-card-icon {
    grid-area:icon; align-self:start; justify-self:start;
    margin-bottom:.55rem;
  }
  .hmhs-hero .hmhs-card-body { display:contents; }
  .hmhs-hero .hmhs-card-title {
    grid-area:title; display:block; width:100%; max-width:100%;
    hyphens:manual; -webkit-hyphens:manual;
    overflow-wrap:break-word; word-break:normal;
  }
  .hmhs-hero .hmhs-card-description {
    grid-area:desc; margin-top:.2rem;
  }
  .hmhs-hero .hmhs-card-label {
    grid-area:label; margin-top:.5rem; padding-top:0;
  }
  .hmhs-hero .hmhs-card-price {
    grid-area:price; margin-top:.12rem; min-width:0; align-self:center;
  }
  .hmhs-hero .hmhs-card-link {
    grid-area:price; margin-top:.12rem; padding-top:0; align-self:center;
  }
  .hmhs-hero .hmhs-card-arrow {
    grid-area:arrow; align-self:center; justify-self:end; margin-top:0;
  }
}

@media (prefers-reduced-motion:reduce) { .hmhs-hero a {transition:none !important;transform:none !important;} }


/* The Trust/Service images and the optional Tierfreund panel share one
   natural, content-sized flex row when they actually fit. No viewport cutoff
   is allowed to force a needless second row; wrap only on real shortage. */
.hmhs-hero .hmhs-block--trust.hmhs-has-tierfriend {
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:space-between; column-gap:1.2rem; row-gap:1rem; width:100%;
}
.hmhs-hero .hmhs-has-tierfriend .hmhs-trust {
  min-width:0; width:auto; max-width:100%; flex:0 1 auto;
  justify-content:flex-start; align-self:flex-start;
  order:1;
}
.hmhs-hero .hmhs-tierfriend {
  display:flex; align-items:stretch; min-width:0; width:fit-content;
  order:2; align-self:flex-start;
  max-width:min(100%,var(--hmhs-friend-max-width));
  padding:.85rem 0 .75rem 1rem; position:relative; isolation:isolate;
  background:linear-gradient(120deg,#F6FFF9 0%,#EAF9F0 78%,#F8FFFB 100%);
  border:2px solid #fff; border-radius:22px;
  box-shadow:0 5px 20px rgba(40,83,60,.08); overflow:hidden;
}
.hmhs-hero .hmhs-tierfriend-content { position:relative; z-index:2; flex:1 1 auto; min-width:0; align-self:center; padding:.25rem 0; }
.hmhs-hero .hmhs-tierfriend-badge {
  display:inline-block; padding:.24rem .58rem; border-radius:999px;
  background:#DDF4E1; color:#00745A; font-size:.71rem; font-weight:750;
  margin:0 0 .54rem; line-height:1.35;
}
.hmhs-hero .hmhs-tierfriend-title {
  color:#00483F; font-size:1.54rem; font-weight:800; letter-spacing:-.025em;
  line-height:1.12; margin:0 0 .2rem; overflow-wrap:anywhere;
}
.hmhs-hero .hmhs-tierfriend-bonus { color:#008D6B; font-size:1.12rem; font-weight:800; margin:0 0 .3rem; line-height:1.21; }
.hmhs-hero .hmhs-tierfriend-description { color:#244746; font-size:.82rem; line-height:1.4; margin:0 0 .65rem; }
.hmhs-hero .hmhs-tierfriend-button {
  --hmhs-friend-button-size:.82rem;
  --hmhs-friend-button-weight:750;
  --hmhs-friend-button-pad-y:.55rem;
  --hmhs-friend-button-pad-x:.75rem;
  --hmhs-friend-button-radius:2rem;
  display:inline-flex !important; align-items:center; justify-content:center; gap:.48rem;
  font-size:var(--hmhs-friend-button-size) !important;
  font-weight:var(--hmhs-friend-button-weight) !important;
  text-decoration:none; text-align:center;
  border:1px solid #007F69; border-radius:var(--hmhs-friend-button-radius) !important;
  padding:var(--hmhs-friend-button-pad-y) var(--hmhs-friend-button-pad-x) !important;
  background:#007F69; color:#fff; min-height:2.55rem;
  line-height:1.2 !important; box-sizing:border-box !important;
  width:auto !important; height:auto !important; max-width:100%;
  min-height:2.55rem !important; white-space:normal !important;
  letter-spacing:normal !important; text-transform:none !important;
  box-shadow:none !important; filter:none !important;
  transform:none !important; scale:1 !important;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.hmhs-hero .hmhs-tierfriend-button .hmhs-svg {width:1rem;height:1rem;flex-shrink:0;}
/* Keep the same intrinsic geometry while hovering or using the keyboard.
   Elementor/theme link hover rules must not enlarge this CTA. */
.hmhs-hero .hmhs-tierfriend-button:hover,
.hmhs-hero .hmhs-tierfriend-button:focus-visible,
.hmhs-hero .hmhs-tierfriend-button:active {
  font-size:var(--hmhs-friend-button-size) !important;
  font-weight:var(--hmhs-friend-button-weight) !important;
  padding:var(--hmhs-friend-button-pad-y) var(--hmhs-friend-button-pad-x) !important;
  line-height:1.2 !important; border-width:1px !important;
  border-radius:var(--hmhs-friend-button-radius) !important;
  display:inline-flex !important; width:auto !important; height:auto !important;
  min-height:2.55rem !important; max-width:100% !important;
  letter-spacing:normal !important; text-transform:none !important;
  white-space:normal !important; box-shadow:none !important; filter:none !important;
  transform:none !important; scale:1 !important;
}
.hmhs-hero .hmhs-tierfriend-button:hover {background:#DDF4E8;color:#005F50;}
.hmhs-hero .hmhs-tierfriend-button:focus-visible {outline:3px solid #1B7092;outline-offset:3px;}
.hmhs-hero .hmhs-tierfriend-art {position:relative;align-self:stretch;flex:0 0 12.5rem;width:12.5rem;max-width:44%;margin-left:0;transform:translateX(-1.25rem);margin-bottom:-.75rem;overflow:hidden;isolation:isolate;z-index:1;mask-image:linear-gradient(to right,transparent 0%,#000 20%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%);}
/* The flexible artwork slot may be as tall as the card, while a landscape or
   transparent cutout image is often much shorter. Position its actual image box
   against the BOTTOM RIGHT of the slot; do not rely on percentage image heights
   and object-position to align an intrinsically sized replaced element. The
   existing responsive slot width and editable translateX spacing are retained. */
.hmhs-hero .hmhs-tierfriend-image {display:block;position:absolute;right:0;bottom:0;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:right bottom;}
/* Not part of the drag-sortable blocks: always the final real HTML element. */
.hmhs-hero .hmhs-footer-note {order:9999;position:relative;z-index:2;width:100%;max-width:100%;margin-top:1rem;color:#687371;font-size:.72rem;line-height:1.5;overflow-wrap:anywhere;}
.hmhs-hero .hmhs-footer-note p {margin:0;}
@media (max-width:599px) {
  .hmhs-hero .hmhs-block--trust.hmhs-has-tierfriend {gap:1rem;}
  .hmhs-hero .hmhs-tierfriend {
    width:100%; max-width:100%; flex-direction:column;
    padding:1rem; border-radius:18px;
  }
  .hmhs-hero .hmhs-tierfriend-content {
    width:100%; padding:0;
  }
  .hmhs-hero .hmhs-tierfriend-art {
    order:-1; align-self:center; flex:0 0 auto;
    width:min(100%,12rem); max-width:100%;
    margin:0 auto .75rem; transform:none; overflow:visible;
    mask-image:none; -webkit-mask-image:none;
  }
  .hmhs-hero .hmhs-tierfriend-image {
    position:relative; right:auto; bottom:auto;
    width:100%; height:auto; max-height:none;
    object-position:center bottom;
  }
  /* Only the content below the compact label spans the full panel. */
  .hmhs-hero .hmhs-tierfriend-badge {
    display:inline-block; width:max-content; max-width:100%;
  }
  .hmhs-hero .hmhs-tierfriend-title,
  .hmhs-hero .hmhs-tierfriend-bonus,
  .hmhs-hero .hmhs-tierfriend-description {
    display:block; width:100%;
  }
  .hmhs-hero .hmhs-tierfriend-title {font-size:1.25rem;}
  .hmhs-hero .hmhs-tierfriend-bonus {font-size:.94rem;}
  .hmhs-hero .hmhs-tierfriend-description {font-size:.75rem;}
  .hmhs-hero .hmhs-tierfriend-button {
    --hmhs-friend-button-size:.76rem;--hmhs-friend-button-pad-y:.52rem;--hmhs-friend-button-pad-x:.55rem;
    /* Used by the high-specificity PHP normal/hover/focus rule as well. */
    --hmhs-friend-button-display:flex !important;
    --hmhs-friend-button-width:100% !important;
    display:flex !important; width:100% !important; max-width:100% !important;
    align-items:center; justify-content:center; text-align:center;
  }
}

/* v1.1.13: the contact strip is a FULL BLEED background, not a rounded
   floating card. Its inner content is centered and width constrained, as in
   Elementor's full-width section + boxed inner container pattern. */
.hmhs-hero .hmhs-block--contact {
  order:900; position:relative; left:50%; transform:translateX(-50%);
  width:100vw; max-width:100vw; margin:1.15rem 0 .35rem; z-index:2;
}
.hmhs-hero .hmhs-contact {
  display:block; width:100%; max-width:100%; padding:0; margin:0;
  border:1px solid #D9ECE5; border-radius:0;
  background:linear-gradient(120deg,#ECF8F3,#F1FAF6); box-shadow:0 4px 18px rgba(0,80,64,.05);
}
.hmhs-hero .hmhs-contact-inner {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  column-gap:1.5rem; row-gap:.85rem; box-sizing:border-box;
  width:100%; max-width:calc(86.875rem + 2 * var(--hmhs-side-padding));
  margin:0 auto; padding:1rem var(--hmhs-side-padding);
}

.hmhs-hero .hmhs-contact-person { display:flex; align-items:center; gap:.9rem; flex:1 1 21rem; min-width:0; }
.hmhs-hero .hmhs-contact-avatar { display:block; width:6rem; height:6rem; flex-shrink:0; overflow:hidden; border:3px solid #fff; border-radius:50%; background:#fff; box-shadow:0 2px 10px rgba(0,75,55,.09); }
/* Crop controls act on the photograph inside the round mask, not the mask. */
.hmhs-hero .hmhs-contact-portrait { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 16%; transform-origin:50% 50%; }
.hmhs-hero .hmhs-contact-person-text { display:flex; flex-direction:column; min-width:0; gap:.2rem; }
.hmhs-hero .hmhs-contact-name { color:#004D45; font-size:1.32rem; line-height:1.18; font-weight:750; overflow-wrap:anywhere; }
.hmhs-hero .hmhs-contact-subtitle { color:#526B68; font-size:.9rem; line-height:1.4; overflow-wrap:anywhere; }
/* An optional third line, independently editable and responsive. Blank data = no element. */
.hmhs-hero .hmhs-contact-additional { display:block; color:#526B68; font-size:.86rem; line-height:1.45; overflow-wrap:anywhere; }
/* Equal-size contact tiles: one shared width based on the longest active
   caption and saved tile width, so icon centres and actual horizontal gaps
   remain regular. Flex wraps complete tiles into centred rows without any
   special-case grid orphan or breaking a caption. */
.hmhs-hero .hmhs-contact-actions {
  display:flex; flex:0 0 auto; justify-content:center;
  flex-wrap:wrap; align-items:stretch; gap:.65rem;
  width:min(100%,var(--hmhs-contact-group-width,26rem));
  max-width:100%; min-width:0; margin-inline:auto;
}
.hmhs-hero .hmhs-contact-action {
  display:grid; grid-template-rows:var(--hmhs-contact-icon-row,3rem) auto;
  flex:0 0 var(--hmhs-contact-uniform-width,7.9rem);
  width:var(--hmhs-contact-uniform-width,7.9rem);
  min-width:var(--hmhs-contact-uniform-width,7.9rem);
  max-width:100%; justify-items:center; align-content:center; gap:.35rem;
  min-height:6.4rem; padding:.55rem .45rem;
  background:#fff; border:1px solid #E2EFEA; border-radius:14px; text-decoration:none;
  box-shadow:0 2px 10px rgba(8,80,65,.035); transition:background-color .15s ease,transform .15s ease,border-color .15s ease;
}
.hmhs-hero a.hmhs-contact-action:hover { background:#E6F8F0; border-color:#9ED9C3; transform:translateY(-2px); }
.hmhs-hero a.hmhs-contact-action:focus-visible { outline:3px solid #1B7092; outline-offset:3px; }
/* v1.1.11: Direct visual-state classes back up the per-hero CSS. Elementor
   and preview optimizers may reorder styles; disabled means exactly disabled.
   Do not suppress accessible keyboard focus outlines. */
.hmhs-hero .hmhs-contact.hmhs-contact--no-border { border:0 !important; }
.hmhs-hero .hmhs-contact.hmhs-contact--no-shadow { box-shadow:none !important; filter:none !important; }
.hmhs-hero .hmhs-contact-avatar.hmhs-contact-avatar--no-border { border:0 !important; }
.hmhs-hero .hmhs-contact-avatar.hmhs-contact-avatar--no-shadow { box-shadow:none !important; filter:none !important; }
.hmhs-hero .hmhs-contact-action.hmhs-contact-action--no-border,
.hmhs-hero a.hmhs-contact-action.hmhs-contact-action--no-border:hover { border:0 !important; }
.hmhs-hero .hmhs-contact-action.hmhs-contact-action--no-shadow,
.hmhs-hero a.hmhs-contact-action.hmhs-contact-action--no-shadow:hover { box-shadow:none !important; filter:none !important; }
.hmhs-hero .hmhs-contact.hmhs-contact--transparent-bg,
.hmhs-hero .hmhs-contact-action.hmhs-contact-action--transparent-bg,
.hmhs-hero a.hmhs-contact-action.hmhs-contact-action--transparent-bg:hover { background:transparent !important; }

.hmhs-hero .hmhs-contact-icon { display:flex; align-items:center; justify-content:center; width:var(--hmhs-contact-icon-size,3rem); height:var(--hmhs-contact-icon-row,3rem); min-height:0; flex-shrink:0; }
.hmhs-hero .hmhs-contact-icon-image { width:100%; height:var(--hmhs-contact-icon-size,3rem); max-height:100%; display:block; object-fit:contain; }
.hmhs-hero .hmhs-contact-icon .hmhs-svg { width:76%; height:76%; stroke:#029977; }
/* Keep every contact CTA on ONE line, including longer custom labels.
   min-width:max-content on the tile expands it to fit the label instead of
   wrapping at the old configured preferred tile width. */
.hmhs-hero .hmhs-contact-action-label {
  display:block; max-width:100%; text-align:center;
  font-size:.83rem; line-height:1.25; font-weight:730; color:#00544C;
  white-space:nowrap !important; overflow-wrap:normal !important;
  word-break:normal !important; hyphens:none !important;
}
/* Maintain the same intrinsic tile width at every breakpoint; the exact
   number of columns is decided by available space and real saved label style. */
@media (min-width:600px) and (max-width:1199px) {
  .hmhs-hero .hmhs-contact-inner { column-gap:1rem; }
}
@media (max-width:599px) {
  .hmhs-hero .hmhs-block--contact {margin-top:.8rem;}
  .hmhs-hero .hmhs-contact-inner {row-gap:.7rem;}
  .hmhs-hero .hmhs-contact-person { flex:1 1 100%; gap:.8rem; }
  .hmhs-hero .hmhs-contact-name {font-size:1.14rem;}
  .hmhs-hero .hmhs-contact-subtitle {font-size:.8rem;}
  .hmhs-hero .hmhs-contact-additional {font-size:.78rem;}
  .hmhs-hero .hmhs-contact-actions { gap:clamp(.2rem,1.5vw,.65rem); }
  .hmhs-hero .hmhs-contact-action { min-height:5.6rem; padding-inline:clamp(.18rem,.7vw,.45rem); }
  .hmhs-hero .hmhs-contact-action-label {font-size:.79rem;}
}

/* v1.1.13: When contact is active it is the FINAL visible hero section.
   Keep the image note above the contact band, and terminate the background
   precisely at the band's lower border on all four device layouts.
   Scope changes to this hero state: heroes without contact retain their
   original content padding and footer-note placement. */
.hmhs-hero.hmhs-hero--contact-last .hmhs-flow {
  padding-bottom:0 !important;
}
.hmhs-hero.hmhs-hero--contact-last .hmhs-block--contact {
  order:900;
  margin-bottom:0 !important;
  margin-block-end:0 !important;
}
.hmhs-hero.hmhs-hero--contact-last .hmhs-footer-note {
  order:899;
}