/* Brand-colour STRIPE along the shaped bottom edge (Liav, Session 102: the "cut" dividers of page 00, sections 32-34, applied to heroes 335 and 337). The stripe is a 28px non-scaling stroke whose lower edge is the section edge. */
.c-hre__sec { clip-path: none; position: relative;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - clamp(48px, 7vw, 110px) + 1px) no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 0H1440V34C960 34 480 118 0 118Z'/></svg>") bottom / 100% clamp(48px, 7vw, 110px) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - clamp(48px, 7vw, 110px) + 1px) no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 0H1440V34C960 34 480 118 0 118Z'/></svg>") bottom / 100% clamp(48px, 7vw, 110px) no-repeat; }
/* 335: the stripe is a BAND mask (area between the edge wave and the same wave 28 units higher), so it always hugs the edge and never clips at the ends; thickness scales with the zone height */
.c-hre__sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(48px, 7vw, 110px); background: linear-gradient(90deg, var(--zk-btn-b, #1d3fa8) 0%, var(--zk-btn-a, #3b6cf0) 100%); -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 118C480 118 960 34 1440 34V0C960 0 480 84 0 84Z'/></svg>") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 118C480 118 960 34 1440 34V6C960 6 480 90 0 90Z'/></svg>") center / 100% 100% no-repeat; pointer-events: none; }
.c-hrg__sec { clip-path: none; position: relative;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - clamp(40px, 7vw, 100px) + 1px) no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 0H1440V22C960 112 480 112 0 22Z'/></svg>") bottom / 100% clamp(40px, 7vw, 100px) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - clamp(40px, 7vw, 100px) + 1px) no-repeat, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0 0H1440V22C960 112 480 112 0 22Z'/></svg>") bottom / 100% clamp(40px, 7vw, 100px) no-repeat; }
.c-hrg__sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(40px, 7vw, 100px); transform: translateY(-14px); background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1'><stop stop-color='%23b8400a'/><stop offset='1' stop-color='%23ea580c'/></linearGradient></defs><path d='M-120 14C460 127 980 127 1560 14' stroke='url(%23g)' stroke-width='28' vector-effect='non-scaling-stroke' fill='none'/></svg>") center / 100% 100% no-repeat; pointer-events: none; }