/* Grip Race on the TruGrit site: the home page feature (look 5) and Grip Patrol, the footer mini game.
   Uses the site's own fonts (PIRULEN, Barlow, Barlow Condensed) and colours. Class prefix .tgr- */

.tgr-feat{background:#021A2B;border-top:4px solid #FFB81C;color:#FFFFFF;font-family:Barlow,'Segoe UI',system-ui,sans-serif}
.tgr-feat-in{box-sizing:border-box;max-width:1320px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(330px,420px) minmax(0,1fr);grid-template-areas:"copy media" "steps media";column-gap:36px}
.tgr-copy{grid-area:copy;box-sizing:border-box;padding:44px 36px 0;background:#003050}
.tgr-steps{grid-area:steps;box-sizing:border-box;padding:22px 36px 40px;background:#003050;display:flex;flex-direction:column;gap:28px}
.tgr-media{grid-area:media;box-sizing:border-box;padding:36px 0 40px;display:flex;flex-direction:column;gap:14px;min-width:0}

.tgr-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#FFB81C;color:#021A2B;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.tgr-title{margin:20px 0 0;font-family:PIRULEN,'Barlow Condensed',sans-serif;font-weight:400;font-size:clamp(32px,3.2vw,46px);line-height:1.04;text-transform:uppercase;color:#FFFFFF}
.tgr-title span{color:#FFB81C}
.tgr-lede{margin:14px 0 0;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:24px;line-height:1.2;color:#FFFFFF}
.tgr-body{margin:8px 0 0;font-size:16px;line-height:1.55;color:#C9D6E2}

.tgr-jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:18px;letter-spacing:.03em}
.tgr-jobs li{display:flex;align-items:center;gap:10px}
.tgr-jobs span{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border:1px solid #FFB81C;color:#FFB81C;font-size:15px}
.tgr-ctas{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tgr-play{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;background:#FFB81C;color:#021A2B;border-radius:4px;text-decoration:none;font-weight:700;font-size:18px;transition:background-color .14s ease-out}
.tgr-play:hover,.tgr-play:focus-visible{background:#FFC94D;color:#021A2B}
.tgr-shop{color:#FFFFFF;font-size:16px;text-decoration:underline;text-underline-offset:4px}
.tgr-shop:hover{color:#FFD36B}
.tgr-feat a:focus-visible,.tgr-feat button:focus-visible{outline:2px solid #FFB81C;outline-offset:3px}

.tgr-figure{margin:0;display:flex;flex-direction:column;width:100%;max-width:820px;align-self:center}
.tgr-clip{display:block;line-height:0;background:#000000}
.tgr-video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000000;object-fit:cover}
/* the tag, caption and Play/Pause sit in a bar under the clip, so nothing covers the game's own text in the footage */
.tgr-bar{display:flex;align-items:center;gap:14px;padding:8px 12px;background:#0E1B26;border:1px solid rgba(201,214,226,.18);border-top:0}
.tgr-tag{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#FFB81C}
.tgr-dot{width:8px;height:8px;border-radius:50%;background:#5A6B7A}
.tgr-figure[data-playing="1"] .tgr-dot{background:#3DDC84}
.tgr-caption{flex:1;min-width:0;font-size:13px;color:#C9D6E2}
.tgr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tgr-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:112px;box-sizing:border-box;height:32px;padding:0 14px;border:1px solid rgba(201,214,226,.4);border-radius:3px;background:none;color:#FFFFFF;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.tgr-toggle:hover{border-color:#FFB81C;color:#FFB81C}
.tgr-i-pause{display:none}
.tgr-figure[data-playing="1"] .tgr-i-pause{display:block}
.tgr-figure[data-playing="1"] .tgr-i-play{display:none}

.tgr-mains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:820px;align-self:center}
.tgr-main{display:flex;gap:12px;align-items:center;padding:8px;background:#0E1B26;border:1px solid rgba(201,214,226,.18);min-width:0}
.tgr-main img{flex:0 0 auto;width:120px;height:68px;object-fit:cover}
.tgr-main b{display:block;font-family:'Barlow Condensed',Barlow,sans-serif;font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.tgr-main span{font-size:13px;color:#C9D6E2}

@media (max-width:999px){
  .tgr-feat-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "media" "steps";padding:0}
  .tgr-copy{padding:36px 24px 0;background:none}
  .tgr-media{padding:22px 24px 0}
  .tgr-steps{padding:26px 24px 40px;background:none;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between}
  .tgr-ctas{margin-top:0}
}
@media (max-width:599px){
  .tgr-copy{padding:30px 16px 0}
  .tgr-media{padding:18px 16px 0}
  .tgr-steps{padding:22px 16px 34px;flex-direction:column;align-items:stretch}
  .tgr-title{font-size:34px}
  .tgr-lede{font-size:21px}
  .tgr-bar{gap:10px;padding:6px 8px}
  .tgr-tag{display:none}
  .tgr-caption{font-size:12px}
  .tgr-toggle{min-width:92px;padding:0 10px;font-size:14px}
  .tgr-mains{grid-template-columns:minmax(0,1fr)}
  .tgr-main img{width:96px;height:54px}
  .tgr-play{justify-content:center}
  .tgr-ctas{align-items:stretch}
  .tgr-shop{align-self:center}
}

/* Grip Patrol: a pipe lane that rides on the top line of the site's bottom bar (the phone dock on phones) */
.tgr-gp{position:fixed;left:0;right:0;bottom:0;z-index:2147482979;height:var(--gp-h,70px);pointer-events:none;font-family:Barlow,'Segoe UI',system-ui,sans-serif;color:#FFFFFF;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out}
.tgr-gp.away{transform:translateY(calc(100% + 40px));opacity:0}
.tgr-gp[hidden]{display:none}
.tgr-gp-lane{position:absolute;inset:0;pointer-events:auto;overflow:visible;background:linear-gradient(180deg,#050F18 0%,#0C2234 30%,#133149 58%,#0B1E2E 84%,#1D4560 93%,#08141F 100%);border-top:1px solid rgba(255,184,28,.35);box-shadow:0 -8px 22px rgba(2,26,43,.28)}
.tgr-gp-lane::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;background:rgba(120,190,230,.22)}
.tgr-gp.off .tgr-gp-lane{display:none}
.tgr-gp-grease{position:absolute;bottom:2px;height:9px;border-radius:50%;background:radial-gradient(closest-side,rgba(236,214,150,.75),rgba(160,130,60,.35) 60%,rgba(0,0,0,0))}
.tgr-gp-grease i{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font-style:normal;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;color:rgba(236,214,150,.8)}
.tgr-gp-flag{position:absolute;bottom:0;width:44px;height:calc(var(--gp-h,70px) - 4px);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* the flag's top stays 23px under the lane's top line at every lane height, leaving that strip for the defect names */
.tgr-gp-flag .ring{position:absolute;left:13px;bottom:3px;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid #FFB81C;animation:tgr-gp-ring 1.6s ease-out infinite}
.tgr-gp-flag .pole{position:absolute;left:21px;bottom:4px;width:2px;height:calc(var(--gp-h,70px) - 40px);background:rgba(255,184,28,.7)}
.tgr-gp-flag .vane{position:absolute;left:14px;bottom:calc(var(--gp-h,70px) - 42px);width:16px;height:16px;box-sizing:border-box;transform:rotate(45deg);background:#FFB81C;border:2px solid #021A2B}
.tgr-gp-flag.done{cursor:default}
.tgr-gp-flag.done .ring{animation:none;opacity:0}
.tgr-gp-flag.done .pole{background:rgba(61,220,132,.6)}
.tgr-gp-flag.done .vane{background:#3DDC84}
.tgr-gp-flag:focus-visible{outline:2px solid #FFB81C;outline-offset:-2px}
.tgr-gp-flagtag{position:absolute;top:3px;width:180px;margin-left:-90px;text-align:center;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:12px;line-height:15px;letter-spacing:.1em;text-transform:uppercase;color:#3DDC84;text-shadow:0 0 3px #021A2B,0 0 6px #021A2B;pointer-events:none;white-space:nowrap}
@keyframes tgr-gp-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* footer-crawler.json: body 220 x 94, wheels 88 wide at x 0 and 91.2, y 6.2 */
.tgr-gp-crawler{position:absolute;left:0;bottom:4px;width:var(--gp-cw,132px);height:calc(var(--gp-cw,132px) * 94 / 220);pointer-events:none;will-change:transform}
.tgr-gp-crawler img{position:absolute;display:block;max-width:none}
.tgr-gp-body{left:0;top:0;width:100%;height:100%}
.tgr-gp-wheel{top:6.62%;width:40%;height:auto;aspect-ratio:1/1}
.tgr-gp-wheel.w1{left:0}
.tgr-gp-wheel.w2{left:41.44%}
.tgr-gp-flash{position:absolute;left:85%;top:-4%;width:30%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,236,170,.5) 45%,rgba(255,236,170,0));opacity:0}
.tgr-gp-beam{position:absolute;left:97%;top:21%;width:90%;height:25%;background:linear-gradient(90deg,rgba(255,240,200,.35),rgba(255,240,200,0));clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);opacity:.45}

.tgr-gp-msg{position:absolute;bottom:calc(var(--gp-h,70px) + 6px);padding:4px 10px;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease-out}
.tgr-gp-msg.on{opacity:1}
.tgr-gp-msg.bad{background:#FF5A4E;color:#FFFFFF}
.tgr-gp-msg.good{background:#FFB81C;color:#021A2B}
.tgr-gp-msg.log{background:rgba(2,26,43,.94);border:1px solid #3DDC84;color:#FFFFFF;font-weight:600;letter-spacing:.06em;text-transform:none}
.tgr-gp-hint{position:absolute;bottom:calc(var(--gp-h,70px) + 6px);padding:3px 10px;background:rgba(2,26,43,.88);color:#C9D6E2;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s ease-out}
.tgr-gp-hint.on{opacity:1}
.tgr-gp-chip{position:absolute;bottom:calc(var(--gp-h,70px) + 6px);display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:0;border-radius:3px;background:#FFB81C;color:#021A2B;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 4px 14px rgba(2,26,43,.35)}
.tgr-gp-chip[hidden]{display:none}
.tgr-gp-chip:hover{background:#FFC94D;color:#021A2B}
.tgr-gp-chip:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}

.tgr-gp-ctl{position:absolute;right:0;top:0;bottom:0;box-sizing:border-box;padding:6px 12px 6px 22px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;background:linear-gradient(90deg,rgba(2,26,43,0),rgba(2,26,43,.94) 16%);pointer-events:auto}
.tgr-gp-link{color:#FFB81C;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.tgr-gp-link:hover{color:#FFD36B;text-decoration:underline}
.tgr-gp-row{display:flex;align-items:center;gap:6px}
.tgr-gp-lbl{font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8796A5}
.tgr-gp-btn{height:30px;padding:0 9px;border:1px solid rgba(201,214,226,.3);border-radius:3px;background:transparent;color:#FFFFFF;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.tgr-gp-btn[aria-pressed="true"].stock{border-color:#FF5A4E;background:rgba(255,90,78,.25)}
.tgr-gp-btn[aria-pressed="true"].tg{border-color:#FFB81C;background:#FFB81C;color:#021A2B;font-weight:700}
.tgr-gp-btn:focus-visible,.tgr-gp-x:focus-visible,.tgr-gp-show:focus-visible,.tgr-gp-link:focus-visible{outline:2px solid #FFB81C;outline-offset:2px}
.tgr-gp-x{width:30px;height:30px;padding:0;display:grid;place-items:center;border:1px solid rgba(201,214,226,.3);border-radius:3px;background:none;color:#C9D6E2;cursor:pointer}
.tgr-gp-x:hover{color:#FFFFFF;border-color:#C9D6E2}
.tgr-gp-show{position:absolute;right:12px;bottom:0;height:30px;padding:0 12px;border:1px solid rgba(255,184,28,.6);border-bottom:0;border-radius:3px 3px 0 0;background:#021A2B;color:#FFB81C;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;pointer-events:auto}
.tgr-gp-show[hidden]{display:none}

/* phones: one flag, a shorter lane, the controls without their labels */
.tgr-gp.narrow .tgr-gp-link,.tgr-gp.narrow .tgr-gp-lbl,.tgr-gp.narrow .tgr-gp-btn.tg{display:none}
.tgr-gp.narrow .tgr-gp-ctl{padding:0 6px 0 12px;background:linear-gradient(90deg,rgba(2,26,43,0),rgba(2,26,43,.94) 10px)}
.tgr-gp.narrow .tgr-gp-row{gap:4px}
.tgr-gp.narrow .tgr-gp-btn{height:32px;padding:0 6px;font-size:12px;letter-spacing:.02em}
.tgr-gp.narrow .tgr-gp-x{width:32px;height:32px}
.tgr-gp.narrow .tgr-gp-msg,.tgr-gp.narrow .tgr-gp-chip{font-size:13px}

/* while the lane is out the footer gets its height of extra room (the script sets --tgr-gp-room) */
html.tgr-gp-room footer.tg-ondark{padding-bottom:var(--tgr-gp-room,0px)!important}
@media (min-width:700px){
  html.tgr-gp-room body.tg-has-bar .tg-page>footer,html.tgr-gp-room body.tg-has-bar .tg-page footer.tg-ondark{padding-bottom:calc(46px + var(--tgr-gp-room,0px))!important}
}

@media (prefers-reduced-motion:reduce){
  .tgr-gp,.tgr-gp-msg,.tgr-gp-hint{transition:none}
  .tgr-gp-flag .ring{animation:none;opacity:.6}
}
@media print{.tgr-gp{display:none}}