/* Layout measured from the supplied reference. The centre product visual is supplied separately. */
.reference-story { position:relative; container-type:inline-size; background:#fffae9; color:#342a16; overflow:hidden; }
.reference-story .why-reference { position:relative; height:55.1cqw; padding:0; background:transparent; }
.reference-story .why-reference::before { content:''; position:absolute; top:0; left:22%; width:56%; height:11.7cqw; background:#fff9e9; z-index:0; }
.reference-story .jar-hotspot,.reference-story .testimonial-overlay { display:none; }
.reference-story .why-reference > .relative { position:static; max-width:none; padding:0; }
.reference-story .why-reference-title { position:absolute; z-index:1; top:2.1cqw; left:0; width:100%; margin:0!important; font:700 3cqw/1.2 'Alata',sans-serif; text-align:center; color:#51300e!important; }
.reference-story .why-reference-tagline { position:absolute; z-index:1; top:6.8cqw; left:0; width:100%; margin:0; font:400 1.35cqw/1.5 'Poppins',sans-serif; text-align:center; color:#796443; }
.reference-story .why-reference-tagline::after,.reference-story .testimonial-heading p::after { content:'✿'; display:block; width:14cqw; margin:.5cqw auto 0; font:2.3cqw/1 Georgia,serif; color:#efbf3c; background:linear-gradient(#b99043,#b99043) left center / 5.1cqw 1px no-repeat,linear-gradient(#b99043,#b99043) right center / 5.1cqw 1px no-repeat; }
.reference-story .why-reference .grid { position:static; display:block; padding:0; }
.reference-story .why-reference .grid > .flex { position:absolute; top:12.8cqw; left:4.9%; width:29.3%; display:flex; flex-direction:column; gap:0; }
.reference-story .why-reference .grid > .flex:last-child { left:68.3%; width:28%; }
.reference-story .why-feature { position:relative; z-index:1; display:flex; flex-direction:row; align-items:flex-start; gap:1.65cqw; height:13.5cqw; min-height:0; margin:0!important; transform:none; text-align:left; isolation:isolate; }
.reference-story .why-feature::before { content:''; position:absolute; z-index:-1; inset:-.45cqw -.7cqw; border-radius:.45cqw; background:#fff9e9; }
.reference-story .why-feature > div { min-width:0; flex:1; }
.reference-story .why-icon { width:6.35cqw; height:6.35cqw; flex:0 0 6.35cqw; padding:1.25cqw; border-radius:50%; background:radial-gradient(circle at 40% 30%,#ffe89c,#f8d974); fill:none; stroke:#453917; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.reference-story .why-feature h3 { margin:.35cqw 0 .55cqw; font:600 1.3cqw/1.22 'Poppins',sans-serif; color:#332b19; }
.reference-story .why-feature p { max-width:none; margin:0; font:400 1.1cqw/1.5 'Poppins',sans-serif; color:#443e2d; }
.reference-story .why-centerpiece { position:absolute; top:14%; left:34%; width:32%; height:76%; background:url('./figma/whychooseus.png') center / contain no-repeat; }
.reference-story .testimonial-reference { position:relative; height:50.76cqw; padding:0; background:#e8bc7e url('./figma/testimonialBG.png') center / 100% 100% no-repeat; }
.reference-story .testimonial-reference::before,.reference-story .testimonial-reference::after { display:none; }
.reference-story .testimonial-content { position:static; display:block; max-width:none; padding:0; margin:0; }
.reference-story .testimonial-heading { position:absolute; z-index:1; top:1.6cqw; left:0; width:100%; max-width:none; margin:0; padding:0; text-align:center; }
.reference-story .testimonial-heading h2 { margin:0 0 .55cqw; font:700 3.15cqw/1.2 'Alata',sans-serif; color:#784819; }
.reference-story .testimonial-heading h2 br { display:none; }
.reference-story .testimonial-heading p { margin:0; font:400 1.4cqw/1.5 'Poppins',sans-serif; color:#765a33; text-align:center; }
.reference-story .testimonial-heading p::after { margin-top:.8cqw; }
.reference-story .testimonial-cards { position:absolute; top:12.3cqw; left:11.5%; width:77.6%; margin:0; overflow:visible; }
.reference-story .testimonialSwiper { padding:0 0 2cqw; }
.reference-story .testimonialSwiper .swiper-slide { padding:0; height:auto; }
.reference-story .testimonial-card { width:100%; max-width:none; height:30.6cqw; min-height:0; background:#fffdf4; border:1px solid #f8f0d9; border-radius:1.3cqw; box-shadow:0 .7cqw 1.4cqw #7250202a; transform:none; }
.reference-story .testimonial-card > div:first-child { padding:1.6cqw 2.5cqw 0; flex:1; min-height:0; }
.reference-story .testimonial-card > div:first-child > img,.reference-story .testimonial-card > div:first-child > div { display:block; width:9.4cqw; height:9.4cqw; min-height:9.4cqw; margin:0 auto; border-radius:50%; object-fit:cover; overflow:hidden; }
.reference-story .testimonial-card > div:first-child > div img { width:100%; height:100%; object-fit:cover; }
.reference-story .testimonial-card > div:first-child p { position:relative; margin:1.35cqw 0 0; padding:0 1.4cqw; font:400 1.16cqw/1.36 'Poppins',sans-serif; color:#3e392c; }
.reference-story .testimonial-card > div:first-child p::before,.reference-story .testimonial-card > div:first-child p::after { position:absolute; color:#e7b821; font:700 3.3cqw/1 Georgia,serif; }
.reference-story .testimonial-card > div:first-child p::before { content:'“'; top:-1.8cqw; left:-.4cqw; }
.reference-story .testimonial-card > div:first-child p::after { content:'”'; bottom:-1.6cqw; right:-.4cqw; }
.reference-story .testimonial-card > div:last-child { padding:.75cqw 1cqw 1.2cqw; }
.reference-story .testimonial-card > div:last-child > div { gap:.32cqw; margin-bottom:.6cqw; }
.reference-story .testimonial-card svg { width:1.6cqw; height:1.6cqw; fill:#ebba16; }
.reference-story .testimonial-card h3 { margin:0; font:500 1.3cqw/1.4 'Poppins',sans-serif; color:#322a18; }
.reference-story .testimonial-card > div:last-child p { margin:0; font:400 1.05cqw/1.4 'Poppins',sans-serif; color:#857555; }
@media (max-width:767px) {
 .reference-story { background:#fffae9; }
 .reference-story .why-reference { height:auto; padding:30px 22px; }
 .reference-story .why-reference::before,.reference-story .testimonial-reference::before { display:none; }
 .reference-story .why-reference-title,.reference-story .why-reference-tagline { position:static; }
 .reference-story .why-reference-title { font-size:26px; }
 .reference-story .why-reference-tagline { margin-top:8px; font-size:12px; }
 .reference-story .why-reference-tagline::after,.reference-story .testimonial-heading p::after { width:112px; font-size:25px; margin-top:12px; background-size:42px 1px; }
 .reference-story .why-reference .grid { display:flex; flex-direction:column; }
 .reference-story .why-centerpiece { position:relative; order:-1; top:auto; left:auto; width:290px; max-width:100%; height:300px; margin:8px auto 20px; background:url('./figma/whychooseus.png') center / contain no-repeat; }
 .reference-story .why-reference .grid > .flex,.reference-story .why-reference .grid > .flex:last-child { position:static; width:100%; gap:24px; margin-bottom:24px; }
 .reference-story .why-feature { height:auto; gap:15px; }
 .reference-story .why-feature::before { display:none; }
 .reference-story .why-icon { width:52px; height:52px; flex-basis:52px; padding:11px; }
 .reference-story .why-feature h3 { margin:1px 0 6px; font-size:15px; }
 .reference-story .why-feature p { font-size:12px; line-height:1.55; }
 .reference-story .testimonial-reference { height:auto; padding:32px 0 48px; background:#e8bc7e url('./figma/testimonialBG.png') center / cover no-repeat; }
 .reference-story .testimonial-heading { position:static; padding:0 16px; }
 .reference-story .testimonial-heading h2 { font-size:28px; margin-bottom:8px; }
 .reference-story .testimonial-heading p { font-size:12px; }
 .reference-story .testimonial-cards { position:static; width:84%; margin:22px auto 0; }
 .reference-story .testimonialSwiper { padding-bottom:14px; }
 .reference-story .testimonial-card { height:360px; border-radius:12px; box-shadow:0 5px 16px #72502030; }
 .reference-story .testimonial-card > div:first-child { padding:20px 24px 0; }
 .reference-story .testimonial-card > div:first-child > img,.reference-story .testimonial-card > div:first-child > div { width:86px; height:86px; min-height:86px; }
 .reference-story .testimonial-card > div:first-child p { margin-top:22px; padding:0 12px; font-size:13px; line-height:1.4; }
 .reference-story .testimonial-card > div:first-child p::before,.reference-story .testimonial-card > div:first-child p::after { font-size:30px; }
 .reference-story .testimonial-card > div:first-child p::before { top:-17px; left:-5px; }
 .reference-story .testimonial-card > div:first-child p::after { bottom:-20px; right:-5px; }
 .reference-story .testimonial-card > div:last-child { padding:15px 16px; }
 .reference-story .testimonial-card > div:last-child > div { gap:4px; margin-bottom:7px; }
 .reference-story .testimonial-card svg { width:16px; height:16px; }
 .reference-story .testimonial-card h3 { font-size:14px; }
 .reference-story .testimonial-card > div:last-child p { font-size:11px; }
}