﻿/* OEM opening: airy photographs and a quiet centre. */
.v11-oem-hero{background:#f8f4ef;border-bottom:0}
.v11-oem-hero::before{content:"";position:absolute;inset:10% -15% 7%;background:#fffdfb;border-radius:49% 55% 44% 48% / 20% 30% 24% 28%;transform:rotate(-4deg);pointer-events:none;z-index:-1}
.v11-oem-hero .v11-oem-grid{position:relative;display:grid;grid-template-columns:1fr;min-height:1080px;padding-top:36px;padding-bottom:48px;gap:0}
.v11-oem-visual.oem-hero-collage{position:relative;grid-area:1 / 1;width:100%;max-width:none;height:1000px;margin:0;align-self:center}
.oem-hero-collage .oem-hero-orb{position:absolute;margin:0;aspect-ratio:1;border:0;background:transparent;box-shadow:none;overflow:visible}
.oem-hero-collage .oem-hero-orb img{display:block;width:100%;height:100%;object-fit:contain;border-radius:0}
.oem-hero-orb::before{content:"";position:absolute;inset:10% -9% -2% 8%;border-radius:42% 58% 66% 34% / 60% 41% 59% 40%;background:#ecd5a3;transform:rotate(18deg);z-index:-1}
.oem-hero-orb.orb-cream-puff{width:28%;left:0;top:0;transform:rotate(-5deg)}
.oem-hero-orb.orb-cream-puff::before{background:#efe2c9}
.oem-hero-orb.orb-chiffon-spoon{width:27%;right:0;top:3%}
.oem-hero-orb.orb-chiffon-spoon img{object-fit:cover;object-position:50% 35%;border-radius:50%}
.oem-hero-orb.orb-chiffon-spoon::before{inset:-5% 8% 9% -11%;background:#dfbb78;transform:rotate(-20deg)}
.oem-hero-orb.orb-strawberry{width:22%;left:3%;top:38%;transform:rotate(5deg)}
.oem-hero-orb.orb-strawberry::before,.oem-hero-orb.orb-grape::before{display:none}
.oem-hero-orb.orb-grape{width:22%;right:3%;top:38%;transform:rotate(-6deg)}
.oem-hero-orb.orb-process{width:26%;left:0;bottom:0;transform:rotate(-4deg)}
.oem-hero-orb.orb-process img{object-fit:cover;border-radius:48% 52% 46% 54%}
.oem-hero-orb.orb-process::before{inset:4% -7% -6% 10%;background:#e6c990}
.oem-hero-orb.orb-dorayaki{width:28%;right:0;bottom:0;transform:rotate(5deg)}
.oem-hero-orb.orb-dorayaki::before{background:#f0e4d0;inset:1% 10% 10% -5%}
.v11-oem-hero .v11-oem-copy{position:relative;grid-area:1 / 1;justify-self:center;align-self:center;width:39%;max-width:440px;padding:30px 0;text-align:center;z-index:1}
.v11-oem-hero .v11-oem-copy::before{content:"";display:block;width:1px;height:65px;background:#bb965f;margin:0 auto 30px}
.v11-oem-hero .v11-kicker{color:#997b51;font-size:10px;font-weight:400;letter-spacing:.2em;line-height:1.8;margin-bottom:28px}
.v11-oem-hero .v11-oem-copy h1{color:#514133;font-family:var(--luxe-serif,serif);font-size:clamp(40px,4.2vw,60px);font-weight:400;letter-spacing:.1em;line-height:1.6}
.v11-oem-hero .v11-oem-copy h1 em{color:#a78046;font-size:.75em;letter-spacing:.22em}
.v11-oem-hero .v11-oem-sub{font-size:17px;color:#8e704a;line-height:2;margin:28px 0 22px}
.v11-oem-hero .v11-oem-copy>p:not(.v11-oem-sub){max-width:340px;margin:0 auto;font-size:12px;color:#786c60;line-height:2.5;text-align:left;text-wrap:pretty}
.v11-oem-hero .v11-breadcrumb{margin-top:28px;color:#9d8b76;font-size:10px;letter-spacing:.12em}
@media(min-width:761px) and (max-width:1000px){
.v11-oem-hero .v11-oem-grid{min-height:800px}
.v11-oem-visual.oem-hero-collage{height:730px;grid-row:1}
.v11-oem-hero .v11-oem-copy{width:44%}
.v11-oem-hero .v11-oem-sub{font-size:15px}
.oem-hero-orb.orb-strawberry{left:1%}
.oem-hero-orb.orb-grape{right:1%}
}
@media(max-width:760px){
.v11-oem-hero::before{inset:7% -45% 4%;border-radius:45% / 12%}
.v11-oem-hero .v11-oem-grid{min-height:0;display:flex;flex-direction:column;padding-top:36px;padding-bottom:50px}
.v11-oem-hero .v11-oem-copy{order:0;width:100%;max-width:430px;padding:0 8px 38px;align-self:center}
.v11-oem-hero .v11-oem-copy::before{height:36px;margin-bottom:22px}
.v11-oem-hero .v11-kicker{font-size:9px;margin-bottom:18px}
.v11-oem-hero .v11-oem-copy h1{font-size:42px;line-height:1.4}
.v11-oem-hero .v11-oem-sub{margin-top:20px;font-size:16px}
.v11-oem-visual.oem-hero-collage{order:1;display:grid;grid-template-columns:1fr 1fr;gap:28px 22px;width:100%;max-width:460px;height:auto;margin:0 auto;padding:12px 10px 20px}
.oem-hero-collage .oem-hero-orb{position:relative;inset:auto;width:100%;align-self:center}
.oem-hero-collage .orb-chiffon-spoon{grid-column:2;grid-row:1;margin-top:30px}
.oem-hero-collage .orb-strawberry{grid-column:1;grid-row:2;width:94%;justify-self:center}
.oem-hero-collage .orb-grape{grid-column:2;grid-row:2;width:96%;justify-self:center;margin-top:24px}
.oem-hero-collage .orb-process{grid-column:1;grid-row:3}
.oem-hero-collage .orb-dorayaki{grid-column:2;grid-row:3;margin-top:26px}
}
