@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --picnic-cream: #fff8e9;
    --picnic-paper: #fffdf6;
    --picnic-ink: #193a2b;
    --picnic-green: #276749;
    --picnic-green-dark: #174c35;
    --picnic-sage: #b9d6a3;
    --picnic-orange: #e8740c;
    --picnic-yellow: #f6c85f;
    --picnic-red: #c95b4b;
    --picnic-purple: #6b2fa0;
    --picnic-line: rgba(25, 58, 43, 0.14);
}

.picnic-page {
    background: var(--picnic-cream);
    color: var(--picnic-ink);
}

.picnic-page .container {
    display: block;
    min-height: 100vh;
    background: var(--picnic-cream);
}

.picnic-page .left {
    color: #fff;
    text-decoration: none;
}

.picnic-page header,
.picnic-page .sidebar {
    font-family: "Poppins", sans-serif;
}

.picnic-main { width: 100%; overflow: hidden; font-family: "Manrope", sans-serif; }
.picnic-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.picnic-main h1,
.picnic-main h2,
.picnic-main h3,
.picnic-main p { margin-top: 0; }

.picnic-main h1,
.picnic-main h2 { font-family: "DM Serif Display", serif; font-weight: 400; }

.picnic-main h2 { color: var(--picnic-ink); font-size: clamp(2.35rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -0.025em; margin-bottom: 26px; }

.picnic-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--picnic-orange);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.picnic-kicker::before { content: ""; width: 34px; height: 2px; border-radius: 9px; background: currentColor; }

.picnic-hero {
    position: relative;
    min-height: 790px;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    color: #fff;
}

.picnic-hero-photo,
.picnic-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.picnic-hero-photo { object-fit: cover; object-position: center 46%; z-index: -3; }
.picnic-hero-shade { z-index: -2; background: linear-gradient(90deg, rgba(12, 44, 30, .96) 0%, rgba(12, 44, 30, .68) 46%, rgba(12, 44, 30, .08) 80%), linear-gradient(0deg, rgba(9, 36, 25, .82), transparent 48%); }
.picnic-hero::after { content: ""; position: absolute; right: -40px; bottom: -68px; width: 310px; height: 150px; border-radius: 50%; background: var(--picnic-yellow); opacity: .92; z-index: -1; transform: rotate(-8deg); }

.picnic-hero-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 150px 0 64px; }
.picnic-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.picnic-hero h1 { max-width: 780px; color: #fff; font-size: clamp(4rem, 8vw, 7.5rem); line-height: .88; letter-spacing: -.045em; margin: 24px 0 28px; }
.picnic-hero h1 em { color: var(--picnic-yellow); font-weight: inherit; }
.picnic-lead { max-width: 680px; color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.65; }
.picnic-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 52px; }

.picnic-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border: 1px solid transparent; border-radius: 999px; font-size: .9rem; font-weight: 800; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.picnic-button:hover,
.picnic-button:focus-visible { transform: translateY(-3px); }
.picnic-button-primary { background: var(--picnic-yellow); color: var(--picnic-ink); box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.picnic-button-ghost { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.picnic-button-light { background: #fff; color: var(--picnic-green-dark); box-shadow: 0 12px 34px rgba(12,44,30,.2); }

.picnic-quickfacts { display: flex; flex-wrap: wrap; gap: 34px; margin: 0; padding: 0; list-style: none; }
.picnic-quickfacts li { display: grid; gap: 3px; padding-left: 16px; border-left: 2px solid var(--picnic-yellow); }
.picnic-quickfacts strong { color: #fff; font-size: .94rem; }
.picnic-quickfacts span { color: rgba(255,255,255,.7); font-size: .77rem; }

.picnic-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(50px, 8vw, 110px); padding-block: 140px; align-items: center; }
.picnic-section-copy > p:not(.picnic-kicker):not(.picnic-note) { color: #52665c; font-size: 1.06rem; line-height: 1.85; }
.picnic-note { display: flex; gap: 12px; margin: 26px 0 0; padding: 17px 19px; border-radius: 16px; color: var(--picnic-green-dark); background: #eaf3df; font-weight: 700; line-height: 1.55; }
.picnic-note i { flex: none; color: var(--picnic-red); font-size: 1.35rem; }
.picnic-pillars { display: grid; gap: 14px; }
.picnic-pillars article { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 24px; border: 1px solid var(--picnic-line); border-radius: 22px; background: rgba(255,255,255,.68); box-shadow: 0 18px 48px rgba(28, 73, 50, .06); }
.pillar-icon { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--picnic-cream); font-size: 1.45rem; }
.picnic-pillars h3 { margin: 2px 0 5px; color: var(--picnic-ink); font-size: 1.05rem; }
.picnic-pillars p { margin: 0; color: #64746c; font-size: .87rem; line-height: 1.55; }

.picnic-journey { padding: 130px 0; background-color: var(--picnic-green-dark); background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; }
.picnic-journey h2 { color: #fff; max-width: 620px; }
.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.journey-card { position: relative; min-height: 310px; padding: 30px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(255,255,255,.07); color: #fff; overflow: hidden; }
.journey-number { display: block; color: var(--picnic-yellow); font-family: "DM Serif Display", serif; font-size: 3.4rem; line-height: 1; }
.journey-time { position: absolute; top: 28px; right: 28px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.11); color: rgba(255,255,255,.75); font-size: .72rem; font-weight: 800; }
.journey-card h3 { margin: 54px 0 12px; color: #fff; font-size: 1.18rem; }
.journey-card p { margin: 0; color: rgba(255,255,255,.69); font-size: .88rem; line-height: 1.7; }
.journey-card-photo { padding: 0; }
.journey-card-photo img { width: 100%; height: 100%; min-height: 310px; object-fit: cover; }

.picnic-inclusive { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 9vw, 120px); align-items: center; padding-block: 140px; }
.inclusive-photo { position: relative; min-height: 620px; }
.inclusive-photo::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; border-radius: 28px; background: var(--picnic-yellow); transform: rotate(2deg); }
.inclusive-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 28px; box-shadow: 0 24px 60px rgba(25,58,43,.18); }
.photo-sticker { position: absolute; right: -34px; bottom: 54px; padding: 15px 20px; border-radius: 10px; background: var(--picnic-red); color: #fff; font-family: "DM Serif Display", serif; font-size: 1.2rem; transform: rotate(-5deg); box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.inclusive-copy > p:not(.picnic-kicker) { color: #52665c; font-size: 1.02rem; line-height: 1.8; }
.inclusive-list { display: grid; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.inclusive-list li { display: flex; gap: 14px; align-items: flex-start; color: #52665c; font-size: .93rem; line-height: 1.55; }
.inclusive-list i { flex: none; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--picnic-green); color: #fff; font-size: 1.2rem; }
.inclusive-list strong { color: var(--picnic-ink); }

.picnic-impact { padding: 120px 0; background: #ef6f4f; color: #fff; }
.impact-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.impact-heading h2 { max-width: 690px; margin-bottom: 0; color: #fff; }
.impact-heading .picnic-kicker { color: #ffe7a8; }
.impact-heading > p { max-width: 390px; color: rgba(255,255,255,.8); font-size: .88rem; line-height: 1.65; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 60px; border-top: 1px solid rgba(255,255,255,.3); border-bottom: 1px solid rgba(255,255,255,.3); }
.impact-grid article { min-height: 240px; padding: 34px 26px; border-right: 1px solid rgba(255,255,255,.3); }
.impact-grid article:last-child { border-right: 0; }
.impact-grid strong { display: block; color: #fff; font-family: "DM Serif Display", serif; font-size: clamp(3.6rem, 6vw, 5.5rem); font-weight: 400; line-height: .9; }
.impact-grid strong span { font-size: .4em; }
.impact-grid p { min-height: 48px; margin: 28px 0 9px; font-weight: 800; line-height: 1.4; }
.impact-grid small { color: rgba(255,255,255,.72); }
.impact-disclaimer { max-width: 760px; margin: 22px 0 0; color: rgba(255,255,255,.68); font-size: .76rem; line-height: 1.6; }

.picnic-voices { padding-block: 140px; }
.picnic-voices h2 { max-width: 720px; }
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.voices-grid blockquote { position: relative; margin: 0; padding: 34px 30px; border: 1px solid var(--picnic-line); border-radius: 24px; background: var(--picnic-paper); box-shadow: 0 14px 50px rgba(25,58,43,.06); }
.quote-mark { display: block; height: 45px; color: var(--picnic-orange); font-family: "DM Serif Display", serif; font-size: 4.5rem; line-height: 1; }
.voices-grid blockquote p { min-height: 112px; color: #3d5549; font-family: "DM Serif Display", serif; font-size: 1.35rem; line-height: 1.48; }
.voices-grid blockquote footer { color: var(--picnic-green); font-size: .78rem; font-weight: 800; }

.picnic-gallery { padding: 125px 0; background: #eaf1df; }
.gallery-grid { display: grid; grid-template-columns: 1.25fr .75fr 1fr; grid-template-rows: 300px 300px; gap: 14px; margin-top: 48px; }
.gallery-grid figure { position: relative; margin: 0; border-radius: 22px; overflow: hidden; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(17,55,38,.8); backdrop-filter: blur(8px); color: #fff; font-size: .72rem; font-weight: 800; }
.gallery-wide { grid-row: 1 / 3; }
.gallery-tall { grid-row: 1 / 3; }

.picnic-audience { padding-block: 140px; }
.audience-heading { max-width: 770px; }
.audience-heading > p:last-child { max-width: 650px; color: #52665c; font-size: 1.02rem; line-height: 1.75; }
.audience-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.audience-cards article { padding: 30px; border: 1px solid var(--picnic-line); border-radius: 24px; background: var(--picnic-paper); }
.audience-cards i { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--picnic-green); color: #fff; font-size: 1.7rem; }
.audience-cards h3 { color: var(--picnic-ink); margin: 24px 0 10px; }
.audience-cards p { margin: 0; color: #607168; font-size: .9rem; line-height: 1.65; }

.picnic-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 9vw, 120px); padding-bottom: 140px; }
.faq-list { border-top: 1px solid var(--picnic-line); }
.faq-list details { border-bottom: 1px solid var(--picnic-line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; cursor: pointer; color: var(--picnic-ink); font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { font-size: 1.4rem; transition: transform .25s ease; }
.faq-list details[open] summary i { transform: rotate(45deg); }
.faq-list details p { padding: 0 40px 24px 0; color: #607168; line-height: 1.75; }

.picnic-cta { position: relative; isolation: isolate; padding: 120px 24px; background: var(--picnic-green); color: #fff; overflow: hidden; }
.cta-pattern { position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: linear-gradient(45deg, #fff 25%, transparent 25%), linear-gradient(-45deg, #fff 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #fff 75%), linear-gradient(-45deg, transparent 75%, #fff 75%); background-size: 54px 54px; background-position: 0 0, 0 27px, 27px -27px, -27px 0; }
.cta-content { max-width: 850px; margin: auto; text-align: center; }
.cta-content .picnic-kicker { justify-content: center; color: var(--picnic-yellow); }
.cta-content .picnic-kicker::before { display: none; }
.cta-content h2 { color: #fff; }
.cta-content > p:not(.picnic-kicker) { max-width: 650px; margin: 0 auto 32px; color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.7; }

.picnic-footer { background: #102a20; }
.picnic-footer .footer-text h2 { margin: 0; color: rgba(255,255,255,.55); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 600; }

@media (max-width: 980px) {
    .picnic-intro,
    .picnic-inclusive,
    .picnic-faq { grid-template-columns: 1fr; }
    .journey-grid { grid-template-columns: repeat(2, 1fr); }
    .impact-heading { align-items: flex-start; flex-direction: column; }
    .impact-grid { grid-template-columns: repeat(2, 1fr); }
    .impact-grid article:nth-child(2) { border-right: 0; }
    .impact-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.3); }
    .voices-grid,
    .audience-cards { grid-template-columns: 1fr; }
    .voices-grid blockquote p { min-height: 0; }
    .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 330px 330px; }
    .gallery-wide { grid-row: auto; }
    .gallery-tall { grid-row: 1 / 3; grid-column: 2; }
    .inclusive-photo { min-height: 540px; max-width: 650px; }
}

@media (max-width: 700px) {
    .picnic-wrap,
    .picnic-hero-content { width: min(100% - 32px, 1180px); }
    .picnic-hero { min-height: 780px; }
    .picnic-hero-shade { background: linear-gradient(0deg, rgba(9,36,25,.98) 0%, rgba(9,36,25,.7) 62%, rgba(9,36,25,.18) 100%); }
    .picnic-hero-content { padding-bottom: 44px; }
    .picnic-hero h1 { font-size: clamp(3.6rem, 18vw, 5.2rem); }
    .picnic-actions { align-items: stretch; flex-direction: column; }
    .picnic-button { width: 100%; }
    .picnic-quickfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .picnic-intro,
    .picnic-inclusive,
    .picnic-voices,
    .picnic-audience { padding-block: 95px; }
    .picnic-journey,
    .picnic-gallery,
    .picnic-impact { padding-block: 90px; }
    .journey-grid,
    .impact-grid { grid-template-columns: 1fr; }
    .journey-card { min-height: 280px; }
    .impact-grid article { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.3); }
    .impact-grid article:last-child { border-bottom: 0; }
    .inclusive-photo { min-height: 480px; margin-right: 12px; }
    .photo-sticker { right: -12px; }
    .gallery-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 330px); }
    .gallery-wide,
    .gallery-tall { grid-column: auto; grid-row: auto; }
    .picnic-faq { padding-bottom: 95px; }
    .picnic-cta { padding-block: 90px; }
}

@media (max-width: 430px) {
    .picnic-main h2 { font-size: 2.55rem; }
    .picnic-eyebrow { font-size: .62rem; }
    .picnic-quickfacts { grid-template-columns: 1fr; }
    .picnic-hero::after { display: none; }
    .inclusive-photo { min-height: 420px; }
    .voices-grid blockquote { padding: 28px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .picnic-button,
    .gallery-grid img { transition: none; }
}