/* No Slip home section on the TruGrit site: OEM vs TruGrit wheel loop. Site fonts (PIRULEN, Barlow, Barlow Condensed)
   and colours (navy #003050, deep #021A2B, #114575, amber #FFB81C). Class prefix .tgns- */

.tgns{background:#F4F6F8;border-top:1px solid #DCE2E8;color:#0E1B26;font-family:Barlow,'Segoe UI',system-ui,sans-serif}
.tgns *,.tgns *::before,.tgns *::after{box-sizing:border-box}
.tgns-in{max-width:1320px;margin:0 auto;padding:72px 24px 76px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head copy" "media media";column-gap:56px;row-gap:36px;align-items:end}
.tgns-head{grid-area:head;min-width:0}
.tgns-copy{grid-area:copy;min-width:0;max-width:600px}
.tgns-figure{grid-area:media;margin:0;min-width:0}

.tgns-eyebrow{margin:0 0 10px;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#114575}
.tgns .tgns-title{margin:0;font-family:PIRULEN,'Barlow Condensed',sans-serif;font-weight:400;font-size:clamp(28px,3.5vw,50px);line-height:1.08;letter-spacing:0;text-transform:uppercase;color:#003050}
.tgns-title em{display:inline-block;font-style:normal;padding-bottom:.08em;background:linear-gradient(transparent 84%,#FFB81C 84%,#FFB81C 100%)}
.tgns-lede{margin:0;font-weight:600;font-size:20px;line-height:1.45;color:#0E1B26}
.tgns-body{margin:10px 0 0;font-size:17px;line-height:1.55;color:#3D4D5C}

.tgns-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:22px}
.tgns a.tgns-shop,.tgns a.tgns-shop:visited{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;background:#003050;color:#FFFFFF;border-radius:4px;font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;transition:background-color .14s ease-out}
.tgns a.tgns-shop:hover,.tgns a.tgns-shop:focus-visible{background:#114575;color:#FFFFFF}
.tgns a.tgns-find,.tgns a.tgns-find:visited{display:inline-flex;align-items:center;min-height:44px;color:#003050;font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:4px}
.tgns a.tgns-find:hover{color:#114575}
.tgns a:focus-visible,.tgns button:focus-visible{outline:2px solid #FFB81C;outline-offset:3px}

.tgns-screen{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#021A2B;border-radius:8px 8px 0 0;box-shadow:0 34px 60px -34px rgba(2,26,43,.65)}
.tgns-poster,.tgns-poster img{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;object-fit:cover}
.tgns-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;background:transparent;opacity:0;transition:opacity .45s ease-out}
.tgns-figure[data-shown="1"] .tgns-video{opacity:1}

.tgns-bar{display:flex;align-items:center;gap:14px;padding:8px 12px 8px 14px;background:#0E1B26;border-radius:0 0 8px 8px;color:#C9D6E2}
.tgns-tag{flex:0 0 auto;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}
.tgns-dot{width:8px;height:8px;border-radius:50%;background:#5A6B7A}
.tgns-figure[data-playing="1"] .tgns-dot{background:#3DDC84}
.tgns-caption{flex:1;min-width:0;font-size:13px;line-height:1.35;color:#C9D6E2}
.tgns button.tgns-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:104px;height:32px;margin:0 0 0 auto;padding:0 14px;border:1px solid rgba(201,214,226,.4);border-radius:3px;background:none;box-shadow:none;color:#FFFFFF;font-family:'Barlow Condensed',Barlow,sans-serif;font-weight:700;font-size:15px;line-height:1;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none}
.tgns button.tgns-toggle[hidden]{display:none}
.tgns button.tgns-toggle:hover{border-color:#FFB81C;color:#FFB81C;background:none}
.tgns-i-pause{display:none}
.tgns-figure[data-playing="1"] .tgns-i-pause{display:block}
.tgns-figure[data-playing="1"] .tgns-i-play{display:none}

/* Tablets: words on the left, the upright cut of the loop on the right */
@media (max-width:999px){
  .tgns-in{grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-areas:"head media" "copy media";align-items:start;column-gap:36px;row-gap:22px;padding:60px 24px 64px}
  .tgns-head{align-self:end}
  .tgns-screen{aspect-ratio:4/5}
  .tgns-bar{flex-wrap:wrap;row-gap:6px}
  .tgns-caption{flex-basis:100%;order:3}
}

/* Phones: title, loop, then the words */
@media (max-width:699px){
  .tgns-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "media" "copy";row-gap:22px;padding:48px 16px 52px}
  .tgns-lede{font-size:18px}
  .tgns-body{font-size:16px}
  .tgns-ctas{flex-direction:column;align-items:stretch;gap:6px}
  .tgns a.tgns-shop{justify-content:center}
  .tgns a.tgns-find{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .tgns-video{transition:none}
  .tgns a.tgns-shop{transition:none}
}