/* ÓLEO: a compact editorial hero, with artwork controlled by native page scroll. */
.oil-hero{--oil-header:100px;--uncap:0;--aside:0;--settle:0;--tilt:0;--pour:0;--pool:0;--oil-progress:0;--oil-mouth:47.792%;position:relative;margin:0 var(--gutter);border-bottom:1px solid var(--line)}
.oil-hero-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"copy art" "trust art" "cue cue";column-gap:5%;align-items:center;padding:22px 0 18px;background:var(--paper)}
.oil-copy{grid-area:copy;align-self:end;padding-top:24px;padding-bottom:34px}
.oil-copy .eyebrow{margin-bottom:28px;font-size:.8125rem;letter-spacing:.1em}
.oil-copy .oil-claim{font-family:var(--serif);font-weight:500;font-size:clamp(3.4rem,6.65vw,7rem);line-height:1.03;letter-spacing:-.052em;margin:0 0 0 -.035em;max-width:10ch}
.oil-copy .oil-claim em{white-space:nowrap}
.oil-copy .hero-description{font-size:1.125rem;line-height:1.55;max-width:28ch;margin-top:28px}
.oil-trust{grid-area:trust;align-self:start}
.oil-trust .hero-reputation{margin:0;padding:20px 0 0;max-width:420px;gap:24px}
.oil-trust .hero-reputation-score{font-size:4rem}
.oil-trust .hero-reputation-copy{font-size:.9375rem;gap:5px}
.oil-trust .hero-reputation-copy>span:last-child{font-size:.8125rem}
.oil-art{grid-area:art;position:relative;width:100%;margin:0;min-width:0}
.oil-canvas{position:relative;width:100%;aspect-ratio:1;isolation:isolate;overflow:hidden}
.oil-halo{position:absolute;inset:8% 0 0;border-radius:50%;background:radial-gradient(ellipse at 54% 64%,var(--soft),transparent 67%);opacity:.8}
.oil-object{position:absolute;inset:0;transform:scale(calc(.85 - var(--uncap) * .23 + var(--settle) * .23));transform-origin:54% 90%}
.oil-bottle{position:absolute;left:54%;top:46%;width:35%;transform-origin:50% 3.5%;transform:translateX(-50%) rotate(calc(var(--tilt) * 112deg));z-index:2}
.oil-bottle>img:first-child{display:block;width:100%;height:auto}
.oil-bottle .oil-bottle-brand{position:absolute;top:47%;left:24%;width:52%;height:auto}
.oil-cap{position:absolute;left:54%;top:3.8%;width:61.5%;height:auto;z-index:3;transform-origin:46.8% 59.2%;transform:translateX(-46.8%) translate(calc(var(--aside) * 40%),calc(var(--uncap) * -50% + var(--settle) * 32%)) rotate(calc(var(--aside) * 8deg)) scale(calc(1 - var(--aside) * .22));clip-path:inset(0 0 40.8% 0)}
/* The matching brush layer stays behind the glass and is revealed only above
   the neck until fully extracted. Both layers use the exact same transform. */
.oil-brush-window{position:absolute;inset:0;z-index:1;clip-path:inset(0 0 calc((1 - var(--aside)) * (100% - var(--oil-mouth))) 0)}
.oil-cap-brush{clip-path:inset(59.2% 0 0 0)}
.oil-stream{position:absolute;left:54%;top:var(--oil-mouth);width:3.8%;height:42%;object-fit:fill;z-index:1;transform:translateX(-50%);opacity:clamp(0,calc(var(--pour) * 8),1);clip-path:inset(0 0 calc((1 - var(--pour)) * 100%) 0)}
.oil-pool{position:absolute;left:54%;top:88%;width:39%;height:auto;z-index:1;transform:translateX(-50%) scale(calc(.25 + var(--pool) * .75));opacity:var(--pool);transform-origin:50% 20%}
.oil-art-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 0;color:var(--muted);font-size:.75rem;letter-spacing:.08em;min-height:48px}
.oil-motion-toggle{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:96px;border:1px solid var(--control-line);border-radius:999px;background:var(--surface);color:var(--ink);padding:8px 12px;font:400 .8125rem var(--sans);letter-spacing:0}
.oil-motion-toggle[hidden]{display:none}.oil-motion-toggle:hover{background:var(--action)}
.oil-scroll-cue{grid-area:cue;display:flex;align-items:center;justify-content:center;gap:16px;font-size:.8125rem;color:var(--muted);padding:20px 0 4px;visibility:hidden}
.oil-progress-track{width:72px;height:2px;background:var(--line);overflow:hidden}
.oil-progress-track>span{display:block;width:100%;height:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--oil-progress))}
.oil-hero[data-motion="scroll"]{height:calc(var(--oil-inner-height) + var(--oil-travel))}
.oil-hero[data-motion="scroll"] .oil-hero-inner{position:sticky;top:var(--oil-header)}
.oil-hero[data-motion="scroll"] .oil-scroll-cue{visibility:visible}
.oil-hero[data-motion="scroll"] .oil-bottle,.oil-hero[data-motion="scroll"] .oil-cap{will-change:transform}
.oil-hero[data-motion="inline"] .oil-scroll-cue{visibility:visible}
@media(min-width:1500px){.oil-art{max-width:660px;justify-self:center}.oil-copy{padding-bottom:46px}}
@media(max-width:820px){
 .oil-hero{margin-inline:var(--gutter);--oil-mouth:47.92%}
 .oil-hero-inner{grid-template-columns:1fr;grid-template-areas:"copy" "art" "trust" "cue";gap:0;padding-top:20px;padding-bottom:14px}
 .oil-copy{padding:0}.oil-copy .eyebrow{font-size:.75rem;margin-bottom:18px;line-height:1.5}
 .oil-copy .oil-claim{font-size:clamp(3.2rem,12.3vw,4.9rem);line-height:1.01;max-width:none}
 .oil-copy .hero-description{font-size:1rem;line-height:1.5;max-width:31ch;margin-top:16px}
 .oil-art{width:min(100%,440px);justify-self:center;margin-top:0}
 .oil-canvas{margin-top:-12px;aspect-ratio:1.25}
 .oil-object{transform:scale(calc(.84 - var(--uncap) * .24 + var(--settle) * .24));transform-origin:54% 82%}
 .oil-bottle{width:30%}.oil-cap{top:.9%;width:52.6%}
 .oil-art-caption{font-size:.6875rem;padding-top:0;min-height:44px;letter-spacing:.06em}
 .oil-trust .hero-reputation{gap:20px;padding-top:16px;margin-top:8px;max-width:none}
 .oil-trust .hero-reputation-score{font-size:3.25rem}
 .oil-trust .hero-reputation-copy{font-size:.875rem;gap:3px}
 .oil-trust .hero-reputation-copy>span:last-child{font-size:.75rem}
 .oil-scroll-cue{padding-top:16px;font-size:.75rem}
}
@media(max-width:375px){.oil-copy .oil-claim{font-size:3rem}.oil-copy .eyebrow{margin-bottom:14px}.oil-copy .hero-description{font-size:.9375rem}.oil-trust .hero-reputation{gap:14px}.oil-trust .hero-reputation-score{font-size:2.8rem}.oil-trust .hero-reputation-copy{font-size:.8125rem}}
@media(prefers-reduced-motion:reduce){
 .oil-hero[data-motion]{height:auto}.oil-hero[data-motion] .oil-hero-inner{position:static}
 .oil-hero .oil-bottle{transform:translateX(-50%);will-change:auto}.oil-hero .oil-cap{transform:translateX(-46.8%);clip-path:inset(0 0 40.8% 0);will-change:auto}
 .oil-brush-window{display:none}
 .oil-stream,.oil-pool,.oil-scroll-cue,.oil-motion-toggle{display:none}
}
@media print{.oil-hero[data-motion]{height:auto}.oil-hero[data-motion] .oil-hero-inner{position:static}.oil-scroll-cue,.oil-motion-toggle{display:none}.oil-art{max-width:260px}}