<style>
    .joco-oil-page {
      margin:0;
      background:#fff;
      color:#000;
      font-family:Inter,Arial,sans-serif
    }
    .joco-oil-section {
      padding:60px 20px
    }
	section.joco-oil-section.joco-oil-trusted{
		padding-bottom:0;
	}
    .joco-oil-container {
      width:100%;
    max-width: clamp(1250px, 68.489583cqw, 1315px);
      margin:0 auto
    }

    .joco-oil-hero-inner {
      max-width:700px;
      margin:0 auto
    }
    .joco-oil-eyebrow {
      display:flex;
      align-items:center;
      gap:9px;
      font-size:18px;
      line-height:32px;
      font-weight:700;
      margin:0 0 14px
    }
    .joco-oil-eyebrow::before,.joco-oil-eyebrow::after {
      content:"";
      width:55px;
      height:2px;
      background:#064b8f;
      flex:0 0 55px
    }
    .joco-oil-hero .joco-oil-eyebrow {
      justify-content:center
    }
    .joco-oil-hero-title {
      font-family:Montserrat,Arial,sans-serif;
      font-size:50px;
      line-height:1.3;
      font-weight:700;
      margin:0 0 26px
    }
    .joco-oil-badges {
      display:flex;
      justify-content:center;
      gap:21px;
      list-style:none;
      padding:0;
      margin:0 0 44px
    }
    .joco-oil-badge {
      border:1px solid #fff;
      border-radius:100px;
      min-width:157px;
      padding:2px 15px;
      font-size:15px;
      line-height:32px;
      font-weight:700
    }
    .joco-oil-button {
      display:inline-flex;
      justify-content:center;
      align-items:center;
      min-height:72px;
      width:311px;
      max-width:100%;
      padding:18px 22px;
      background:#064b8f;
      border-radius:8px;
      color:#fff;
      text-decoration:none;
      text-transform:uppercase;
      font-family:Inter,Arial,sans-serif;
      font-size:21px;
      line-height:32px;
      font-weight:600;
      text-align:center
    }
	
	.joco-oil-button:hover{
	background: #7aa9cb;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);	
	}	
	
	
    .joco-oil-button:focus-visible {
      outline:3px solid #064b8f;
      outline-offset:4px
    }
    .joco-oil-hero .joco-oil-button:focus-visible {
      outline-color:#fff
    }
    .joco-oil-grid {
      display:grid;
      grid-template-columns:minmax(0,748fr) minmax(0,534fr);
      gap:38px;
      align-items:start
    }
    .joco-oil-heading {
      font-family:Montserrat,Arial,sans-serif;
      font-size:40px;
      line-height:1.233;
      font-weight:700;
      margin:0 0 22px
    }
    .joco-oil-highlight {
      color:#064b8f;
      font-weight:600
    }
    .joco-oil-heading .joco-oil-highlight {
      font-weight:700
    }
    .joco-oil-text {
      font-family:Inter,Arial,sans-serif;
      font-size:18px;
      line-height:29.287px;
      font-weight:400;
      margin:0 0 26px
    }
    .joco-oil-copy > :last-child {
      margin-bottom:0
    }
    .joco-oil-photo {
      position:relative;
      overflow:hidden;
      border-radius:8px;
      margin:0;
      width:100%;
      aspect-ratio:534/538
    }
    .joco-oil-photo img {
      display:block;
/*       position:relative; */
/*       max-width:none; */
      height:auto;
      width:147.565%;
      left:-32.959%;
      top:-1.38%
    }
    .joco-oil-reliable .joco-oil-heading {
      max-width:700px
    }
    .joco-oil-reliable .joco-oil-photo {
      margin-top:8px
    }
    .joco-oil-professional {
      background:#fafafa
    }
    .joco-oil-professional .joco-oil-grid {
      grid-template-columns:minmax(0,534fr) minmax(0,725fr);
      gap:60px;
      align-items:center
    }
    .joco-oil-professional .joco-oil-photo {
      aspect-ratio:534/565
    }
    .joco-oil-professional .joco-oil-photo img {
      width:175.281%;
      left:-12.172%;
      top:-1.77%
    }
    .joco-oil-trusted .joco-oil-photo {
      aspect-ratio:534/565;
      margin-top:12px
    }
    .joco-oil-trusted .joco-oil-photo img {
      width:163.3%;
      left:-24.34%;
      top:0
    }
    .joco-oil-subheading {
      font-family:Inter,Arial,sans-serif;
      font-size:20px;
      line-height:24px;
      font-weight:700;
      color:#064b8f;
      margin:30px 0 8px
    }
    .joco-oil-benefits {
      margin-top:30px;
      padding:38px 65px;
      background:#fafafa url("https://jocoauto.com/wp-content/uploads/2026/10/key-benefits-bg.webp") center/cover no-repeat
    }
    .joco-oil-benefits-title {
      font-size:20px;
      line-height:32px;
      color:#064b8f;
      font-weight:700;
      margin:0 0 12px
    }
    .joco-oil-benefits-list {
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-auto-flow:column;
      grid-template-rows:repeat(3,auto);
      column-gap:45px;
      row-gap:3px;
      list-style:none;
      padding:0 0 0 45px;
      margin:0
    }
    .joco-oil-benefits-list li {
      display:flex;
      align-items:baseline;
      gap:12px;
      font-size:18px;
      line-height:30.96px
    }
    .joco-oil-benefits-list img {
      width:20px;
      height:18px;
      object-fit:contain;
      flex:none
    }
    .joco-oil-cta {
      text-align:center;
      margin-top:34px
    }
    @media (max-width:1024px) and (min-width:769px) {
      .joco-oil-heading {
        font-size:32px;
        line-height:1.25
      }
      .joco-oil-grid,.joco-oil-professional .joco-oil-grid {
        gap:30px
      }
      .joco-oil-text {
        font-size:16px;
        line-height:25px
      }
      .joco-oil-benefits {
        padding:30px
      }
      .joco-oil-benefits-list {
        padding-left:0;
        gap:8px 24px
      }
      .joco-oil-benefits-list li {
        font-size:16px;
        line-height:25px
      }
    }
    @media (max-width:768px) {

      .joco-oil-section {
        padding:40px 20px
      }
      .joco-oil-container {
        max-width:520px
      }
      .joco-oil-hero-title {
        font-size:36px;
        line-height:1.3;
        margin-bottom:20px
      }
      .joco-oil-eyebrow {
        justify-content:center;
        font-size:16px;
        line-height:24px;
        margin-bottom:14px
      }
      .joco-oil-hero .joco-oil-eyebrow {
        font-size:18px;
        line-height:32px
      }
      .joco-oil-badges {
        gap:7px;
        margin-bottom:32px
      }
      .joco-oil-badge {
        min-width:0;
        padding:3px 9px;
        font-size:10px;
        line-height:20px;
        white-space:nowrap
      }
      .joco-oil-button {
        font-size:15px;
        line-height:32px;
        min-height:72px
      }
      .joco-oil-grid,.joco-oil-professional .joco-oil-grid {
        display:flex;
        flex-direction:column;
        gap:0
      }
      .joco-oil-copy {
        display:contents
      }
      .joco-oil-heading {
        order:0;
        font-size:26px;
        line-height:32px;
        margin:0 0 20px;
        text-align:center;
        width:100%
      }
      .joco-oil-copy .joco-oil-eyebrow {
        order:-1;
        width:100%
      }
      .joco-oil-photo,.joco-oil-professional .joco-oil-photo,.joco-oil-trusted .joco-oil-photo,.joco-oil-reliable .joco-oil-photo {
        order:1;
/*         aspect-ratio:370/219; */
        margin:0 0 22px
      }
      .joco-oil-photo img,.joco-oil-professional .joco-oil-photo img,.joco-oil-trusted .joco-oil-photo img {
        width:100%;
        height:100%;
        object-fit:cover;
        left:0;
        top:0
      }
      .joco-oil-text {
        order:3;
        font-size:15px;
        line-height:23px;
        margin:0 0 24px;
        text-align:center;
        width:100%
      }
      .joco-oil-copy .joco-oil-button {
        order:4;
        align-self:center;
        margin-top:4px
      }
      .joco-oil-subheading {
        order:2;
        font-size:16px;
        line-height:23px;
        text-align:center;
        width:100%;
        margin:0 0 8px
      }
      .joco-oil-trusted .joco-oil-copy {
        display:contents
      }
      .joco-oil-trusted .joco-oil-subheading:nth-of-type(2) {
        order:4;
        margin-top:4px
      }
      .joco-oil-trusted .joco-oil-text:last-child {
        order:5;
        margin-bottom:0
      }
      .joco-oil-benefits {
        padding:24px 18px;
        margin-top:28px;
        text-align:left
      }
      .joco-oil-benefits-title {
        font-size:18px;
        line-height:26px
      }
      .joco-oil-benefits-list {
        display:flex;
        flex-direction:column;
        gap:8px;
        padding:0
      }
      .joco-oil-benefits-list li {
        font-size:15px;
        line-height:23px;
        gap:10px
      }
      .joco-oil-cta {
        margin-top:28px
      }
    }
    @media (max-width:375px) {
      .joco-oil-hero-title {
        font-size:30px
      }
      .joco-oil-badge {
        font-size:9px;
        padding:3px 7px
      }
    }
  </style>
