/* Parkers Gates & Fencing: every picket in the body drawn like the pickets in the logo.
   Load AFTER the design's stylesheet. Goes with components/pickets.js (the section edges).

   The logo's gate (redesign/shared/brand/parkers-logo.png), in units of the picket width p: round tops; one
   rail about 0.6p deep joining the pickets; the slots between them (about 0.6p wide) end in full semicircles
   above and below the rail; separate feet; the outer post is wider (1.3p) and carries a ball (1.07 x the post
   wide, 0.7 as tall as wide) sitting on a short neck (0.77 x the post wide). */

/* ---------- section edges (drawn by pickets.js) ---------- */
/* Its own compositing layer: without it, at fractional pixel ratios (Android 2.6, 2.75) the section's anti-aliased
   bottom row showed under the feet as a one-pixel line (the design has that line too). With the layer the feet
   reach the section's last row at every ratio. */
.pickets{display:block;width:100%;overflow:hidden;transform:translateZ(0)}
/* The CTA band's edge sits in the flow, so its height is set here (no shift when it draws) and pickets.js
   fits the drawing to it. Like the design's bottom:-1px on the other edges, it runs 1px past the band's bottom
   (the band clips it), so the feet meet the footer with no line between them at any pixel ratio. */
.cta [data-pickets]{--pk-fixed:1;height:clamp(84px,calc(70px + 2.65vw),124px);margin-bottom:-1px;line-height:0}

/* ---------- process steps: the five bars become a gate of logo pickets ----------
   Desktop: one row; a rail with the slots' round ends joins the five pickets; the last bar is the post and its
   ball sits on a neck. The design's fade-in (opacity .55 to 1) is premixed into each bar's colours over the
   plum band (it looks the same), so the rail can tuck under the next picket without a seam. */
.steps{--pk-slot:34px;--pk-r:17px;--pk-rail:22px;--pk-foot:18px;--pk-dome:46px}
.step .bar{
  width:calc(100% - (var(--pk-slot) - 22px));
  border-radius:50% 50% 0 0 / var(--pk-dome) var(--pk-dome) 0 0;
  opacity:1;
  background:linear-gradient(180deg,var(--pk-top),var(--pk-bot));
}
.step .bar .num{color:var(--pk-num);left:0;right:0;top:calc(var(--pk-dome) - 6px);text-align:center}
.step:nth-child(1) .bar{opacity:1;--pk-top:#8A2B5F;--pk-bot:#782353;--pk-num:#AAA2AB;--pk-rc:#7E2657;--pk-rn:#932961}
.step:nth-child(2) .bar{opacity:1;--pk-top:#A3306D;--pk-bot:#8E265D;--pk-num:#B6ADB6;--pk-rc:#932961;--pk-rn:#A62C6A}
.step:nth-child(3) .bar{opacity:1;--pk-top:#BB3579;--pk-bot:#A12A67;--pk-num:#D1C8CF;--pk-rc:#A62C6A;--pk-rn:#B62E72}
.step:nth-child(4) .bar{opacity:1;--pk-top:#CE3984;--pk-bot:#B22C6F;--pk-num:#E7DFE4;--pk-rc:#B62E72;--pk-rn:#C6317A}
.step:nth-child(5) .bar{opacity:1;--pk-top:#E23D8E;--pk-bot:#C22F77;--pk-num:rgba(255,255,255,.95)}
/* the post (last bar): square shoulders like the logo's post */
.step:last-child .bar{border-radius:20px 20px 0 0}
/* the rail to the next picket, the slot's round ends cut above and below it; 1px tucks under each picket */
.step .bar::after{
  content:"";position:absolute;left:calc(100% - 1px);bottom:var(--pk-foot);
  width:calc(var(--pk-slot) + 2px);height:calc(var(--pk-r) * 2 + var(--pk-rail));
  background:linear-gradient(90deg,var(--pk-rc) 1px,var(--pk-rn) calc(100% - 1px));
  -webkit-mask:radial-gradient(circle at 50% 0,#0000 var(--pk-r),#000 calc(var(--pk-r) + .6px)) 0 0/100% calc(50% + 1px) no-repeat,radial-gradient(circle at 50% 100%,#0000 var(--pk-r),#000 calc(var(--pk-r) + .6px)) 0 100%/100% calc(50% + 1px) no-repeat;
  mask:radial-gradient(circle at 50% 0,#0000 var(--pk-r),#000 calc(var(--pk-r) + .6px)) 0 0/100% calc(50% + 1px) no-repeat,radial-gradient(circle at 50% 100%,#0000 var(--pk-r),#000 calc(var(--pk-r) + .6px)) 0 100%/100% calc(50% + 1px) no-repeat;
}
.step:last-child .bar::after{content:none}
/* the finial: a ball on a short neck, sitting on the post (no gap) */
.step .finial{top:auto;bottom:100%;width:34px;height:26px;margin-left:-17px;border-radius:0;background:none}
.step .finial::before{content:"";position:absolute;left:0;top:0;width:100%;height:24px;border-radius:50%;background:var(--pink)}
.step .finial::after{content:"";position:absolute;left:50%;bottom:-1px;width:24px;height:10px;margin-left:-12px;background:var(--pink)}

/* Tablet and phone: each step keeps its own marker, as in the design. The marker is a small leaf of the logo's
   gate: the tall middle picket carries the number, a shorter picket stands each side, and the rail joins them
   with the slots' round ends above and below it. Step 5's middle picket is the post, with the logo's ball. */
@media (max-width:1024px){
  .step .bar,.step:nth-child(n) .bar{
    width:44px;height:90px!important;margin-left:23px;opacity:1!important;
    border-radius:50% 50% 0 0 / 20px 20px 0 0;
    --pk-top:var(--pink);--pk-bot:#c22f77;--pk-num:rgba(255,255,255,.95);
  }
  .step:last-child .bar{border-radius:4px 4px 0 0;margin-top:48px}
  .step .bar .num{top:auto;bottom:20px;font-size:40px}
  .step .bar::before,.step .bar::after,.step:last-child .bar::after{
    content:"";position:absolute;top:auto;bottom:0;width:24px;height:62px;
    background:linear-gradient(180deg,var(--pink),#c22f77) 0 100%/100% 90px no-repeat;
  }
  .step .bar::before{left:auto;right:calc(100% - 1px);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 62'%3E%3Cpath d='M0 62V6.6A7 6.6 0 0 1 14 6.6V29A4.5 4.5 0 0 0 23 29H24V46.5H23A4.5 4.5 0 0 0 14 46.5V62Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 62'%3E%3Cpath d='M0 62V6.6A7 6.6 0 0 1 14 6.6V29A4.5 4.5 0 0 0 23 29H24V46.5H23A4.5 4.5 0 0 0 14 46.5V62Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .step .bar::after,.step:last-child .bar::after{left:calc(100% - 1px);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 62'%3E%3Cpath d='M24 62V6.6A7 6.6 0 0 0 10 6.6V29A4.5 4.5 0 0 1 1 29H0V46.5H1A4.5 4.5 0 0 1 10 46.5V62Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 62'%3E%3Cpath d='M24 62V6.6A7 6.6 0 0 0 10 6.6V29A4.5 4.5 0 0 1 1 29H0V46.5H1A4.5 4.5 0 0 1 10 46.5V62Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .step .finial{width:47px;height:32px;margin-left:-23.5px}
  .step .finial::before{height:33px}
  .step .finial::after{width:34px;height:8px;margin-left:-17px}
}
@media (max-width:680px){
  .step .bar,.step:nth-child(n) .bar{width:30px;height:64px!important;margin:0 0 0 17px;border-radius:50% 50% 0 0 / 14px 14px 0 0}
  .step:last-child .bar{border-radius:3px 3px 0 0;margin-top:0}
  .step .bar .num{bottom:13px;font-size:30px}
  .step .bar::before,.step .bar::after,.step:last-child .bar::after{width:18px;height:44px;background:linear-gradient(180deg,var(--pink),#c22f77) 0 100%/100% 64px no-repeat}
  .step .bar::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 44'%3E%3Cpath d='M0 44V4.7A5 4.7 0 0 1 10 4.7V20.5A3.5 3.5 0 0 0 17 20.5H18V33.5H17A3.5 3.5 0 0 0 10 33.5V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 44'%3E%3Cpath d='M0 44V4.7A5 4.7 0 0 1 10 4.7V20.5A3.5 3.5 0 0 0 17 20.5H18V33.5H17A3.5 3.5 0 0 0 10 33.5V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .step .bar::after,.step:last-child .bar::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 44'%3E%3Cpath d='M18 44V4.7A5 4.7 0 0 0 8 4.7V20.5A3.5 3.5 0 0 1 1 20.5H0V33.5H1A3.5 3.5 0 0 1 8 33.5V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 44'%3E%3Cpath d='M18 44V4.7A5 4.7 0 0 0 8 4.7V20.5A3.5 3.5 0 0 1 1 20.5H0V33.5H1A3.5 3.5 0 0 1 8 33.5V44Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
  .step .finial{display:block;width:32px;height:22px;margin-left:-16px}
  .step .finial::before{height:22px}
  .step .finial::after{width:23px;height:7px;margin-left:-11.5px}
}

/* ---------- About, "What you can expect": three mini pickets joined by a rail ---------- */
.ex .pk{position:relative;width:-moz-fit-content;width:fit-content}
.ex .pk i{border-radius:50% 50% 0 0 / 4.2px 4.2px 0 0}
.ex .pk::before{
  content:"";position:absolute;left:0;right:0;bottom:12px;height:10.5px;background:var(--pink);
  -webkit-mask:radial-gradient(circle at 2.5px 0,#0000 2.5px,#000 3.1px) 9px 0/14px calc(50% + 1px) repeat-x,radial-gradient(circle at 2.5px 100%,#0000 2.5px,#000 3.1px) 9px 100%/14px calc(50% + 1px) repeat-x;
  mask:radial-gradient(circle at 2.5px 0,#0000 2.5px,#000 3.1px) 9px 0/14px calc(50% + 1px) repeat-x,radial-gradient(circle at 2.5px 100%,#0000 2.5px,#000 3.1px) 9px 100%/14px calc(50% + 1px) repeat-x;
}

/* ---------- mega menu: each bullet is the logo's post with its ball ---------- */
.mside li::before{
  width:6px;height:16px;border-radius:0;vertical-align:-2px;background:var(--pink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 16'%3E%3Cpath d='M.39 16V4.36A.52.52 0 0 1 .91 3.84H.99V3.32A2.8 1.96 0 1 1 5.01 3.32V3.84H5.09A.52.52 0 0 1 5.61 4.36V16Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 16'%3E%3Cpath d='M.39 16V4.36A.52.52 0 0 1 .91 3.84H.99V3.32A2.8 1.96 0 1 1 5.01 3.32V3.84H5.09A.52.52 0 0 1 5.61 4.36V16Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}