/* GENERATED tools/build_mobile_reference_css.py; 420px reference; 3cbfe6f5b2059459fafe89c10ef1ca455ff4bc047da914a7d84acdff5da91871 */
@media (width > 720px){
/* Matt's 14 September mobile delta, after proportional and review layers.
   Actual viewport breakpoints must not be proportionally transformed. */
@media(max-width:560px){
  .ucards{margin:clamp(34px,8vw,44px) 0 clamp(76px,20vw,104px)}
  .uf-for{left:16px;bottom:0;width:min(246px,88%);padding:15px 18px 16px;
    animation:ufloatMob 9s ease-in-out infinite .8s;
    /* Hold the intended offset during the supplied .8s animation delay. */
    animation-fill-mode:backwards}
  .uf-for .uf-price{margin-top:13px;padding-top:12px}
}
@keyframes ufloatMob{
  0%,100%{transform:translate3d(0,66.667%,0)}
  50%{transform:translate3d(0,calc(66.667% - 12px),0)}
}
@media(max-width:560px) and (prefers-reduced-motion:reduce){
  .uf-for{animation:none;transform:translate3d(0,66.667%,0)}
}
@media(max-width:820px){

  /* Keep geometry stable: only the padding and glass fade into place. */
  #gnav{isolation:isolate;background:none;transition:padding 360ms cubic-bezier(.22,1,.36,1)}
  #gnav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(16,17,8,.92) 0%,rgba(16,17,8,.62) 46%,rgba(16,17,8,0) 100%);
    opacity:1;transition:opacity 360ms ease}
  #gnav.stuck::before{opacity:0}
  #gnav .gnav-in{width:100%;max-width:100%;margin:0;justify-content:space-between;
    transition:padding 360ms cubic-bezier(.22,1,.36,1),background 360ms ease,border-radius 360ms ease,box-shadow 360ms ease}
  .gnav .brandflip,.gnav.stuck .brandflip{width:136px;height:34px}
  /* The saved WordPress logo is not the handover's 4:1 SVG. Bound its
     grid wrapper to the real slot, retaining Site Identity and its ratio. */
  .gnav .brandflip .mk{height:34px;min-height:0;max-width:100%}
  .gnav .brandflip .custom-logo{height:34px;width:auto;max-width:100%;object-fit:contain}
  .gnav .brandflip .face.front,.gnav.stuck .brandflip .face.front{transform:none;opacity:1}
  .gnav .brandflip .face.back,.gnav.stuck .brandflip .face.back{transform:scaleX(0);opacity:0}
  /* Matt's screenshot includes the optional menu: retain a full bar. */
  .gnav.stuck .gnav-in{padding:9px 9px 9px 20px;justify-content:space-between;width:100%;max-width:100%;margin:0}
  /* The current proportional build otherwise keeps desktop actions at
     721–820px. Both halves of Matt's mobile header need the same boundary. */
  .gnav-meta,.gnav .gnav-right > a{display:none}
  .gnav .gnav-right,.gnav.hero-on .gnav-right{display:flex;opacity:1;visibility:visible;margin-left:auto}
  .gnav-burger{display:grid;place-content:center;gap:5px;width:40px;height:40px;border-radius:12px;background:rgba(250,248,242,.12)}
  .gnav-burger i{width:17px;height:1.5px;background:var(--paper)}
  .gnav-burger.on i:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
  .gnav-burger.on i:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
  .gnav-panel{display:flex;visibility:hidden}
  .gnav-panel.open{visibility:visible}
  .gnav-panel a{padding:11px 0;font-size:clamp(30px,9vw,44px)}
  body.care-menu-open .gnav .brandflip .face.front{color:var(--paper)}
  body.care-menu-open .mcta{visibility:hidden}
  .mcta,.mcta.on{display:block}
  .mcta .in{width:100%}
  .mcta .btn{margin-left:auto;font-size:12px;min-height:44px}
  body{padding-bottom:0}
  .foot{padding-bottom:calc(clamp(30px,3.6vw,46px) + 82px + env(safe-area-inset-bottom))}
}

@media(max-width:820px) and (prefers-reduced-motion:reduce){
  #gnav,#gnav::before,#gnav .gnav-in{transition:none}
}

}
@media (max-width:720px){
.ucards{margin:clamp(8.0952380952vw,8vw,10.4761904762vw) 0 clamp(18.0952380952vw,20vw,24.7619047619vw);}
.uf-for{left:3.8095238095vw;bottom:0;width:min(58.5714285714vw,88%);padding:3.5714285714vw 4.2857142857vw 3.8095238095vw;animation:ufloatMob 9s ease-in-out infinite .8s;animation-fill-mode:backwards;}
.uf-for .uf-price{margin-top:3.0952380952vw;padding-top:2.8571428571vw;}
@keyframes ufloatMob{
0%,100%{transform:translate3d(0,66.667%,0);}
50%{transform:translate3d(0,calc(66.667% - 2.8571428571vw),0);}
}
@media (prefers-reduced-motion:reduce){
.uf-for{animation:none;transform:translate3d(0,66.667%,0);}
}
#gnav{isolation:isolate;background:none;transition:padding 360ms cubic-bezier(.22,1,.36,1);}
#gnav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(16,17,8,.92) 0%,rgba(16,17,8,.62) 46%,rgba(16,17,8,0) 100%);opacity:1;transition:opacity 360ms ease;}
#gnav.stuck::before{opacity:0;}
#gnav .gnav-in{width:100%;max-width:100%;margin:0;justify-content:space-between;transition:padding 360ms cubic-bezier(.22,1,.36,1),background 360ms ease,border-radius 360ms ease,box-shadow 360ms ease;}
.gnav .brandflip,.gnav.stuck .brandflip{width:32.380952381vw;height:8.0952380952vw;}
.gnav .brandflip .mk{height:8.0952380952vw;min-height:0;max-width:100%;}
.gnav .brandflip .custom-logo{height:8.0952380952vw;width:auto;max-width:100%;object-fit:contain;}
.gnav .brandflip .face.front,.gnav.stuck .brandflip .face.front{transform:none;opacity:1;}
.gnav .brandflip .face.back,.gnav.stuck .brandflip .face.back{transform:scaleX(0);opacity:0;}
.gnav.stuck .gnav-in{padding:2.1428571429vw 2.1428571429vw 2.1428571429vw 4.7619047619vw;justify-content:space-between;width:100%;max-width:100%;margin:0;}
.gnav-meta,.gnav .gnav-right > a{display:none;}
.gnav .gnav-right,.gnav.hero-on .gnav-right{display:flex;opacity:1;visibility:visible;margin-left:auto;}
.gnav-burger{display:grid;place-content:center;gap:1.1904761905vw;width:9.5238095238vw;height:9.5238095238vw;border-radius:2.8571428571vw;background:rgba(250,248,242,.12);}
.gnav-burger i{width:4.0476190476vw;height:0.3571428571vw;background:var(--paper);}
.gnav-burger.on i:nth-child(1){transform:translateY(0.7738095238vw) rotate(45deg);}
.gnav-burger.on i:nth-child(2){transform:translateY(-0.7738095238vw) rotate(-45deg);}
.gnav-panel{display:flex;visibility:hidden;}
.gnav-panel.open{visibility:visible;}
.gnav-panel a{padding:2.619047619vw 0;font-size:clamp(7.1428571429vw,9vw,10.4761904762vw);}
body.care-menu-open .gnav .brandflip .face.front{color:var(--paper);}
body.care-menu-open .mcta{visibility:hidden;}
.mcta,.mcta.on{display:block;}
.mcta .in{width:100%;}
.mcta .btn{margin-left:auto;font-size:2.8571428571vw;min-height:10.4761904762vw;}
body{padding-bottom:0;}
.foot{padding-bottom:calc(clamp(7.1428571429vw,3.6vw,10.9523809524vw) + 19.5238095238vw + env(safe-area-inset-bottom));}
@media (prefers-reduced-motion:reduce){
#gnav,#gnav::before,#gnav .gnav-in{transition:none;}
}
}
