/* ===== CAROUSEL HERO ===== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --lime:#C8E64A;--orange:#FF6B35;--teal:#2EC4B6;
  --yellow:#FFD23F;--pink:#FF8FAB;--navy:#1A1A2E;
}
body{background:var(--navy);font-family:'Nunito',sans-serif;}

/* NAV */
.nav{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:20px 48px;}
/* nav-logo text rule replaced by SVG */
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links span{color:rgba(255,255,255,0.92);font-size:14px;font-weight:800;cursor:pointer;letter-spacing:0.02em;transition:color 0.2s;text-shadow:0 1px 4px rgba(0,0,0,0.6);}
    .nav-links span:hover{color:var(--lime);}
.nav-cta{background:var(--lime);color:var(--navy);font-size:13px;font-weight:900;padding:9px 24px;border-radius:100px;letter-spacing:0.02em;}

/* CAROUSEL WRAPPER */
.carousel{position:relative;height:620px;overflow:hidden;}

/* === STANDARD SLIDE (image bleeds right) === */
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;align-items:center;}
.slide.active{opacity:1;}

.slide-img{position:absolute;right:0;top:0;bottom:0;width:58%;overflow:hidden;}
.slide-img img{width:100%;height:100%;object-fit:cover;object-position:center top;}
.slide-img::before{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--navy) 0%,rgba(26,26,46,0.55) 55%,transparent 100%);}
.slide-img::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(to top,var(--navy) 0%,transparent 38%);}
/* Slide 1 (Pour) — lighter left fade so bowl stays visible */
#s0 .slide-img::before{background:linear-gradient(90deg,var(--navy) 0%,rgba(26,26,46,0.15) 32%,transparent 52%,rgba(26,26,46,0.55) 78%,var(--navy) 100%);}
/* also pull back bottom fade on slide 1 so bowl isn't darkened */
#s0 .slide-img::after{background:linear-gradient(to top,var(--navy) 0%,transparent 32%,transparent 68%,var(--navy) 100%);}
/* shift image focus right so bowl (center-right of photo) is more exposed */
#s0 .slide-img{width:55%;}
    #s0 .slide-img img{object-fit:contain;object-position:center center;background:#0d1520;}
/* Slide 3 (Picnic/Grab) — lighter left fade, same treatment as slide 1 */
#s2 .slide-img::before{background:linear-gradient(90deg,var(--navy) 0%,rgba(26,26,46,0.2) 38%,transparent 62%);}
#s2 .slide-img::after{background:linear-gradient(to top,rgba(26,26,46,0.5) 0%,transparent 30%);}
    #s2 .slide-img img{object-position:40% center;}
#s1 .slide-img img{object-position:center center;}
    /* Slide 4 (Lineup) — add soft vignette to all edges so bags blend into navy bg */
#s3 .lineup-img-wrap img{filter:drop-shadow(0 12px 40px rgba(0,0,0,0.55));}
#s3 .lineup-img-wrap::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(26,26,46,0.55) 72%, rgba(26,26,46,0.9) 100%);
  pointer-events:none;}
#s3 .lineup-img-wrap{position:relative;}

.slide-text{position:relative;z-index:10;padding:0 0 0 56px;max-width:520px;}
.slide-eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:6px 16px;font-size:11px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:20px;}
.slide-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(40px,5vw,68px);line-height:0.98;color:white;margin-bottom:16px;}
.slide-headline em{font-style:italic;display:block;}
.slide-sub{color:rgba(255,255,255,0.55);font-size:15px;font-weight:600;line-height:1.6;margin-bottom:34px;max-width:360px;}
.slide-cta{display:inline-block;background:var(--orange);color:white;text-decoration:none;padding:15px 36px;border-radius:100px;font-size:14px;font-weight:800;letter-spacing:0.05em;cursor:pointer;border:none;transition:transform 0.2s,box-shadow 0.2s;}
.slide-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,107,53,0.4);}

/* === LINEUP SLIDE (centred, contained image) === */
.slide-lineup{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.slide-lineup.active{opacity:1;}
.lineup-img-wrap{margin-bottom:28px;max-width:700px;width:90%;flex-shrink:0;}
.lineup-img-wrap img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 40px rgba(0,0,0,0.55));}
.lineup-text{z-index:10;}
.lineup-eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:6px 16px;font-size:11px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:14px;background:rgba(46,196,182,0.12);border:1px solid rgba(46,196,182,0.3);color:var(--teal);}
.lineup-headline{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(30px,3.8vw,50px);color:white;line-height:1.05;margin-bottom:10px;}
.lineup-headline em{font-style:italic;color:var(--teal);}
.lineup-sub{color:rgba(255,255,255,0.55);font-size:14px;font-weight:600;line-height:1.6;margin-bottom:24px;}
.lineup-cta{display:inline-block;background:var(--orange);color:white;text-decoration:none;padding:13px 32px;border-radius:100px;font-size:13px;font-weight:800;letter-spacing:0.05em;cursor:pointer;border:none;}

/* DOTS */
.dots{position:absolute;bottom:28px;left:56px;display:flex;gap:10px;z-index:20;align-items:center;}
.dot{height:8px;border-radius:100px;cursor:pointer;transition:all 0.35s ease;background:rgba(255,255,255,0.3);width:8px;}
.dot.active{width:28px;background:var(--lime);}
.counter{position:absolute;bottom:28px;right:48px;z-index:20;color:rgba(255,255,255,0.3);font-size:12px;font-weight:800;letter-spacing:0.1em;}

/* PILLS */
.pills-bar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:20px 40px 24px;border-top:1px solid rgba(255,255,255,0.07);}
.pill{border-radius:100px;padding:9px 20px;font-size:13px;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;border:1px solid currentColor;}
.p-lime{background:rgba(200,230,74,0.16);color:var(--lime);}
.p-teal{background:rgba(46,196,182,0.16);color:var(--teal);}
.p-yellow{background:rgba(255,210,63,0.16);color:var(--yellow);}
.p-pink{background:rgba(255,143,171,0.16);color:var(--pink);}
.below-hint{text-align:center;padding:20px;color:rgba(255,255,255,0.15);font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,0.04);}


    /* ── OUR STORY SECTION ── */
    .story-section{background:var(--off-white);padding:96px 24px;position:relative;overflow:hidden;}
    .story-section::before{
      content:'';position:absolute;top:-120px;right:-80px;
      width:480px;height:480px;border-radius:50%;
      background:radial-gradient(circle, rgba(200,230,74,0.08) 0%, transparent 70%);
      pointer-events:none;
    }
    .story-inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:start;}
    .story-text .sec-label{color:var(--orange);}
    .story-text .sec-title{color:var(--dark);margin-bottom:32px;}
    .story-body{font-size:16px;line-height:1.8;color:rgba(26,26,46,0.72);font-weight:600;margin-bottom:20px;max-width:580px;}
    .story-closer{color:var(--dark);font-weight:800;font-size:17px;}
    /* Aside */
    .story-aside{position:sticky;top:40px;display:flex;flex-direction:column;gap:24px;}
    .story-img-placeholder{background:var(--dark);border-radius:20px;overflow:hidden;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;min-height:340px;}
    .story-img-inner{text-align:center;padding:32px;}
    .story-img-icon{font-size:52px;margin-bottom:16px;opacity:0.6;}
    .story-img-caption{font-size:13px;font-weight:600;color:rgba(255,255,255,0.35);line-height:1.6;}
    .story-quote{background:var(--dark);color:var(--lime);font-family:'Fraunces',serif;font-weight:700;font-style:italic;font-size:17px;line-height:1.6;padding:28px 32px;border-radius:16px;}
    @media(max-width:860px){
      .story-inner{grid-template-columns:1fr;gap:48px;}
      .story-aside{position:static;}
    }


    /* Journey step images */
    .jstep-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;}
    /* Benefits section */
    .benefits-section{background:var(--off-white);padding:96px 24px;}
    .benefits-inner{max-width:1080px;margin:0 auto;}
    .benefits-sub{text-align:center;color:rgba(26,26,46,0.6);font-size:16px;font-weight:600;line-height:1.7;max-width:600px;margin:0 auto 56px;}
    .benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
    .benefit-card{background:white;border-radius:20px;padding:32px 28px;box-shadow:0 2px 20px rgba(0,0,0,0.06);transition:transform 0.2s,box-shadow 0.2s;}
    .benefit-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.1);}
    .benefit-icon{font-size:36px;margin-bottom:16px;}
    .benefit-title{font-family:'Fraunces',serif;font-weight:900;font-size:18px;color:var(--dark);margin-bottom:10px;}
    .benefit-desc{font-size:14px;font-weight:600;color:rgba(26,26,46,0.6);line-height:1.7;}
    @media(max-width:860px){.benefits-grid{grid-template-columns:repeat(2,1fr);}}
    @media(max-width:560px){.benefits-grid{grid-template-columns:1fr;}}


    /* Nav logo — real SVG brand mark */
    .nav-logo { display:flex; align-items:center; text-decoration:none; }
    .nav-logo .oana-logo { width:140px; height:auto; display:block; }
    .nav-logo .oana-logo path, .nav-logo .oana-logo g { fill:#C8E64A !important; }
    .nav-logo .oana-logo path[fill="#ffffff"], .nav-logo .oana-logo path[fill="#fff"] { fill:rgba(200,230,74,0.25) !important; }