/* The bottle and liquid share a generated photograph, aligned at the spout. */
.oil-pour-panel{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:20px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 33% 50%,#63432438,transparent 60%),#10171c;border:1px solid #3e3932;border-radius:20px;margin:0 0 35px;min-height:380px}
.pour-scene{position:relative;aspect-ratio:1/1;width:100%;max-width:540px;justify-self:center;overflow:hidden}
.pour-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.pour-art{clip-path:polygon(20% 0,100% 0,100% 60%,0 60%,0 25%,20% 25%);transform:translateX(-5.9%)}
.pour-engine{clip-path:polygon(0 77%,20% 74%,36% 74%,36% 73%,54% 73%,60% 77%,100% 77%,100% 100%,0 100%);z-index:2}
.oil-drop{position:absolute;inset:0;animation:engine-drip 1.8s cubic-bezier(.42,0,.88,.7) infinite;transform-origin:0 0;will-change:transform;z-index:1;pointer-events:none}
.oil-drop img{clip-path:inset(7% 86% 78% 5%)}
.oil-drop:nth-of-type(2){animation-delay:-.36s}.oil-drop:nth-of-type(3){animation-delay:-.72s}.oil-drop:nth-of-type(4){animation-delay:-1.08s}.oil-drop:nth-of-type(5){animation-delay:-1.44s}
@keyframes engine-drip{0%{transform:translate(42.33%,50%) scale(.22);opacity:0}8%{opacity:1}86%{opacity:1}100%{transform:translate(42.33%,74%) scale(.22);opacity:0}}
.pour-scene.motion-paused .oil-drop{animation-play-state:paused}
.pour-copy .pour-control{border:0;background:transparent;color:#a9b6bf;padding:10px 0;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:14px;cursor:pointer}
.pour-copy .pour-control:focus-visible{outline:2px solid #eeb27f;outline-offset:5px}
.pour-copy{padding:36px 44px 36px 0}.pour-copy .eyebrow{margin-bottom:13px}.pour-copy h3{font-size:clamp(32px,4vw,53px);font-weight:800;letter-spacing:-1.7px;line-height:1.1}.pour-copy h3 em{font-style:normal;color:#eeb27f}.pour-copy>p:not(.eyebrow){font-size:16px;color:#a9b6bf;margin:19px 0 23px;max-width:310px}.pour-copy .button{min-width:170px;font-size:16px}.pour-status{font-size:14px;color:#bfc8ce;margin-top:15px;min-height:23px}.pour-caption{position:absolute;bottom:14px;left:20px;color:#81909c;font-size:12px}

/* Car makes: five logos per row on every screen. */
.car-brand-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){.car-brand-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.oil-pour-panel{grid-template-columns:1fr 1fr;min-height:320px}.pour-copy{padding:25px 20px 25px 0}.pour-copy h3{font-size:35px}}
@media(max-width:640px){.car-brand-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.car-brand{min-height:56px}.car-brand .car-emblem,.car-brand .car-logo{height:39px}.oil-pour-panel{grid-template-columns:1fr;gap:0;margin-bottom:26px;border-radius:16px;padding:0 0 26px;min-height:0}.pour-scene{width:100%;max-width:350px;aspect-ratio:1/1}.pour-copy{padding:24px 23px 18px;width:100%}.pour-copy h3{font-size:32px;letter-spacing:-1px}.pour-copy h3 br{display:none}.pour-copy h3 em:before{content:' '}.pour-copy .eyebrow{font-size:12px;margin-bottom:10px}.pour-copy>p:not(.eyebrow){margin:13px 0 20px;font-size:16px}.pour-copy .button{width:100%;min-height:48px;font-size:16px}.pour-status{text-align:center;font-size:14px;margin-top:11px}.pour-caption{left:23px;bottom:12px;font-size:12px}}

.pour-scene svg.original-pour-bottle{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:lighten}
.home-pour-brand{position:absolute;inset:0;opacity:0;transition:opacity .18s ease;pointer-events:none}
.home-pour-brand.is-current{opacity:1}
@media(prefers-reduced-motion:reduce){.home-pour-brand{transition:none}}

/* Homepage: tyre above the slogan, with a larger centred pouring scene. */
.hero-with-pour{display:block;max-height:none}
.hero-with-pour .hero-top{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;padding-top:125px}
.hero-with-pour .hero-copy{display:contents}
.hero-with-pour .hero-tyre{position:absolute;left:0;right:auto;top:10px;width:110px;max-width:none;opacity:.85;margin:0;z-index:1}
.hero-with-pour .hero-copy .eyebrow{grid-column:1;grid-row:1;max-width:none;text-align:center;margin:0 0 14px;font-size:12px;letter-spacing:1.4px}
.hero-with-pour .hero-copy h1{grid-column:1;grid-row:2;text-align:center;font-size:clamp(38px,5vw,68px);line-height:1.06;margin:0}
.hero-with-pour .hero-pour{grid-column:1;grid-row:3;width:min(100%,420px);max-width:none;justify-self:center;margin:14px auto 0;min-width:0}
.hero-with-pour .pour-scene{max-width:none;width:100%;aspect-ratio:1/1}
.hero-with-pour .hero-copy>p:not(.eyebrow){grid-column:1;grid-row:4;max-width:none;text-align:center;margin:16px 0 0;font-size:16px;line-height:1.65}
.hero-with-pour .hero-buttons{grid-column:1;grid-row:5;display:flex;justify-content:center;gap:12px;margin:22px 0 0;width:min(100%,460px)}
.hero-with-pour .hero-buttons .button{flex:1;min-width:0;min-height:50px;font-size:15px;padding:12px 16px}
.hero-with-pour .hero-scene{width:100%;margin:0 auto;order:initial}
@media(max-width:700px){
 .hero-with-pour .hero-top{padding-top:104px}
 .hero-with-pour .hero-tyre{width:88px;top:8px;left:0}
 .hero-with-pour .hero-copy .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:12px}
 .hero-with-pour .hero-copy h1{font-size:clamp(34px,9vw,58px)}
 .hero-with-pour .hero-pour{width:min(100%,350px);margin-top:12px}
 .hero-with-pour .hero-buttons{gap:10px;margin-top:20px}
 .hero-with-pour .hero-buttons .button{font-size:13px;padding:12px 9px}
}

/* Keep the headline close to the header; crop the large tyre at the viewport edge. */
.hero-with-pour .hero-top{padding-top:20px}
.hero-with-pour .hero-copy h1{grid-row:1}
.hero-with-pour .hero-copy .eyebrow{grid-row:2;margin:16px 0 0}
.hero-with-pour>.hero-tyre{position:absolute;width:clamp(260px,26vw,380px);height:auto;left:0;right:auto;top:170px;transform:translateX(-50%);opacity:.85;z-index:1;margin:0;pointer-events:none}
@media(max-width:700px){
 .hero-with-pour .hero-top{padding-top:16px}
 .hero-with-pour .hero-copy .eyebrow{margin:12px 0 0}
 .hero-with-pour>.hero-tyre{width:220px;left:0;right:auto;top:155px;transform:translateX(-50%)}
}

/* Compact header and a smaller half-visible tyre beside the first headline line. */
.app-home header .nav{height:62px;gap:14px}
.app-home header .nav .logo{width:180px}
.app-home .header-cart{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.hero-with-pour .hero-top{padding-top:8px}
.hero-with-pour .hero-copy h1{width:100%;padding-inline:70px;box-sizing:border-box}
.hero-with-pour>.hero-tyre{width:150px;top:4px;left:0;transform:translateX(-50%)}
@media(max-width:700px){
 .app-home header .nav{height:54px;gap:6px}
 .app-home header .nav .logo{width:145px}
 .app-home header .nav-actions{gap:2px}
 .app-home header .nav-actions .icon-button{width:36px;height:36px;min-width:36px}
 .hero-with-pour .hero-top{padding-top:8px}
 .hero-with-pour .hero-copy h1{padding-inline:26px;font-size:clamp(28px,8vw,52px)}
 .hero-with-pour>.hero-tyre{width:96px;top:4px;left:0;transform:translateX(-50%)}
}

/* Clear hero: remove the secondary tagline and keep motion in the header. */
.app-home .header-tyre{width:34px;height:34px;flex:0 0 34px;pointer-events:none;opacity:.9}
.app-home .header-tyre img{display:block;width:100%;height:100%;object-fit:contain}
.hero-with-pour .hero-copy h1{padding-inline:0}
.hero-with-pour .hero-pour{grid-row:2;margin-top:0}
.hero-with-pour .hero-copy>p:not(.eyebrow){grid-row:3}
.hero-with-pour .hero-buttons{grid-row:4}
@media(max-width:700px){
 .app-home .header-tyre{width:30px;height:30px;flex-basis:30px;margin-right:auto}
 .app-home header .nav .logo{width:140px}
 .hero-with-pour .hero-pour{margin-top:0}
}

/* A clear outlined cart against the dark header. */
.app-home header .nav-actions .header-cart{color:#f7b77c;background:#30271f;border:1px solid #8b6240;border-radius:11px}
.app-home header .header-cart svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-home header .header-cart:hover{background:#473325;color:#ffd7b4}
.app-home header .header-cart:focus-visible{outline:2px solid #f7b77c;outline-offset:3px}

/* A clear promise and discreet branding inside the original showroom. */
.hero-with-pour .hero-copy>p.hero-promise{font-size:clamp(21px,2.7vw,32px);font-weight:600;line-height:1.35;letter-spacing:-.5px;color:#f5f2ed;margin-top:18px}
.hero-promise strong{font-weight:750;color:#ffc27f;text-shadow:0 0 28px #dc83282b}
.hero-with-pour .hero-scene{isolation:isolate}
.hero-scene .showroom-wall-logo{position:absolute;left:62%;top:36%;transform:translateX(-50%);width:28%;height:auto;opacity:.28;mix-blend-mode:screen;z-index:2;pointer-events:none}
.hero-scene .showroom-floor-motto{position:absolute;left:0;right:0;top:89%;margin:0;text-align:center;font-size:clamp(8px,2vw,32px);line-height:1;font-weight:700;letter-spacing:.18em;color:#e3d0b5;opacity:.25;transform:perspective(500px) rotateX(48deg);transform-origin:center;z-index:2;pointer-events:none}
.vehicle-source-details{font-size:12px;line-height:1.6;color:#aab6bf;margin-top:10px}
.vehicle-source-details summary{cursor:pointer;width:fit-content;color:#b9c2c9}
.vehicle-source-details p{max-width:720px;margin:10px 0 0}
.vehicle-source-details a{text-decoration:underline;text-underline-offset:3px}
.brand-range-card .collection-availability{font-size:14px;line-height:1.45;color:#b4bfc7;margin:0}
.brand-range-card h3 a{color:inherit;text-decoration:none}
.brand-range-card .product-preview{display:flex;align-items:center;justify-content:center}
.brand-range-card .view-oil{display:flex;align-items:center;justify-content:center;text-align:center}
@media(max-width:700px){.hero-with-pour .hero-copy>p.hero-promise{font-size:22px;max-width:330px}.showroom-floor-motto{white-space:nowrap}.vehicle-source-details{font-size:11px}.brand-range-card .collection-availability{font-size:12px}}