/* Pickle Pick-Me-Ups — shared site stylesheet
   Design system extracted from the original prototype (emotionalsupportpickle.html):
   cream/forest palette, Fraunces display + Mulish body, pill buttons, botanical line art. */

:root{
  --cream:#faf6f0;
  --panel:#ebe9df;
  --card:#f5efe6;
  --forest:#34502e;
  --forest-deep:#2b4426;
  --btn:#33481f;
  --green:#6f7b53;
  --green-soft:#9aa77f;
  --ink:#3d3d34;
  --ink-soft:#54544a;
  --line:rgba(52,80,46,.14);
  --wood:#c9a876;
  --crisis-bg:#2b4426;
  --crisis-ink:#faf6f0;
  --max:1122px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Mulish",system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.logo-text{font-family:"Fraunces",Georgia,serif;font-weight:500;color:var(--forest);letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.js #top{display:flex;flex-direction:column}
.js #top>*{order:50}
.js #top>.hero{order:1}.js #top>.mission{order:2}.js #top>.products{order:3}.js #top>.reassure{order:4}
.js #top>#about{order:6}.js #top>#mission{order:7}.js #top>#pickle{order:8}.js #top>#plants{order:9}.js #top>#party{order:10}.js #top>#shop{order:11}
.js #about{display:flex;flex-direction:column}
.js #about>*{order:8}.js #about>.about-kicker{order:1}.js #about>#team{order:2}.js #about>.support-search{order:3}.js #about>.page-header{order:4}.js #about>.about-intro{order:5}.js #about>.about-values-section{order:6}.js #about>#who-we-are{order:7}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
@media(max-width:720px){.wrap{padding:0 22px}}
.only-mobile{display:none}
@media(max-width:940px){.only-mobile{display:block}.hide-mobile{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:"Mulish";font-weight:600;font-size:1rem;border:none;cursor:pointer;border-radius:999px;padding:14px 28px;text-decoration:none;transition:transform .15s,background .2s,border-color .2s;line-height:1}
.btn-fill{background:var(--btn);color:#fff}.btn-fill:hover{background:var(--forest-deep);transform:translateY(-1px)}
.btn-out{background:transparent;color:var(--forest);border:1.5px solid rgba(52,80,46,.4)}.btn-out:hover{border-color:var(--forest);transform:translateY(-1px)}
.btn-sm{padding:10px 20px;font-size:.9rem}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

/* ---------- crisis banner (persistent, dismissible) ---------- */
.crisis-bar{background:var(--crisis-bg);color:var(--crisis-ink);font-size:.86rem}
.crisis-bar .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.crisis-bar p{margin:0;flex:1}
.crisis-bar a{color:#fff;text-decoration:underline;font-weight:700}
.crisis-bar b{font-weight:800}
.crisis-close{background:none;border:none;color:#fff;opacity:.7;font-size:1.1rem;cursor:pointer;line-height:1;padding:4px}
.crisis-close:hover{opacity:1}
.crisis-bar.dismissed{display:none}

/* full crisis section (used under hero on homepage) */
.crisis-section{padding:8px 0 6px}
.crisis-box{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:26px 30px;display:flex;gap:18px;align-items:flex-start}
.crisis-box svg{flex:none;width:26px;height:26px;color:var(--forest);margin-top:2px}
.crisis-box h4{font-size:1.02rem;margin-bottom:6px}
.crisis-box p{font-size:.92rem;color:var(--ink-soft)}
.crisis-box a{color:var(--forest);font-weight:700;text-decoration:underline}
@media(max-width:720px){.crisis-box{flex-direction:column}}

/* ---------- nav ---------- */
nav.site-nav{background:var(--cream);border-bottom:1px solid rgba(52,80,46,.08);position:sticky;top:0;z-index:40}
nav.site-nav .wrap{max-width:1800px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo svg{width:24px;height:24px;color:var(--green)}
.logo-text{font-size:1.32rem;white-space:nowrap}
.nav-links{display:flex;gap:16px;flex-shrink:1;min-width:0}
.nav-links a{color:#41453a;text-decoration:none;font-size:.92rem;font-weight:500;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--forest);border-color:var(--green-soft)}
.nav-cta{padding:12px 20px;white-space:nowrap;flex-shrink:0;margin-left:8px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--forest);flex-shrink:0}
.nav-toggle svg{width:26px;height:26px}
@media(max-width:1700px) and (min-width:1101px){
  .nav-inner{height:auto;min-height:112px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 24px;padding-top:12px;padding-bottom:10px}
  .logo{grid-column:1;grid-row:1}
  .nav-cta.hide-mobile{display:inline-flex;grid-column:2;grid-row:1;margin-left:0}
  .nav-links{grid-column:1/-1;grid-row:2;justify-content:center}
}
@media(max-width:1100px){
  .nav-links{display:none}
  .nav-cta.hide-mobile{display:none}
  .nav-toggle{display:flex}
}
.mobile-menu{display:none;background:var(--cream);border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-menu .wrap{padding:8px 40px 22px;display:flex;flex-direction:column;gap:4px}
@media(max-width:720px){.mobile-menu .wrap{padding:8px 22px 22px}}
.mobile-menu a{padding:12px 4px;text-decoration:none;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line)}
.mobile-menu a.btn{border-bottom:none;padding:14px 28px;margin-top:14px;justify-content:center}
.mobile-menu a.btn-fill{color:#fff}
.mobile-menu a.btn-out{color:var(--forest)}

/* ---------- page header (interior pages) ---------- */
.page-header{padding:52px 0 40px;text-align:center}
.page-header .eyebrow{justify-content:center}
.page-header h1{font-size:clamp(2.1rem,5vw,3.3rem);margin-bottom:14px}
.page-header p{max-width:560px;margin:0 auto;color:var(--ink-soft);font-size:1.08rem}
.mission-header{padding:40px 0 28px}
.mission-header h2{font-size:clamp(2rem,4.5vw,2.9rem);max-width:900px;margin:0 auto 14px;line-height:1.12}
.mission-header p{max-width:850px;font-size:1rem;line-height:1.55}

/* ---------- eyebrow ---------- */
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--green);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.eyebrow svg{width:19px;height:19px}

/* ---------- hero (home) ---------- */
.hero{background:var(--cream);padding:22px 0 24px}
.hero-grid{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.hero-heading{max-width:760px}
.hero-content{max-width:900px}
.hero .eyebrow,.hero-btns{justify-content:center}
.hero .eyebrow{margin-bottom:10px}
.hero h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.0;margin-bottom:0}
.hero p{font-size:1.06rem;color:#4b4b40;max-width:900px;margin:0 auto 18px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero>.wrap>.hero-photo{width:100%;max-width:840px}
.hero-photo img{width:100%;height:auto;border-radius:20px}

/* ---------- mission band ---------- */
.mission{padding:20px 0 34px}
.mission-inner{background:var(--panel);border-radius:20px;padding:48px 52px;display:grid;grid-template-columns:0.7fr 1.7fr 1fr;gap:36px;align-items:center}
@media(max-width:900px){.mission-inner{grid-template-columns:1fr;gap:24px;padding:36px 28px;text-align:center}}
.mission .branch{width:150px;justify-self:center}
.mission h2{font-size:clamp(1.6rem,3vw,2rem);line-height:1.14;margin-bottom:16px}
.mission h2 em{font-style:italic}
.mission p{color:var(--ink-soft);margin-bottom:12px;font-size:1.01rem}
.mission p:last-child{margin-bottom:0}
.scan{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
@media(max-width:900px){.scan{align-items:center}}
.scan img{width:52px}
.scan .cap{color:var(--green);font-weight:700;font-size:.85rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.75}

/* ---------- product cards (3-up) ---------- */
.products{padding:8px 0 24px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.prod-grid{grid-template-columns:1fr}}
.pcard{background:var(--card);border-radius:18px;padding:30px 28px;position:relative;overflow:hidden;min-height:250px;display:flex;flex-direction:column;text-decoration:none;transition:transform .18s,box-shadow .18s}
a.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(43,68,38,.45)}
.pcard .badge{width:50px;height:50px;border-radius:50%;background:#e6e2d3;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pcard .badge svg{width:24px;height:24px;color:var(--green)}
.pcard h3{font-size:1.32rem;margin-bottom:12px;max-width:62%;line-height:1.15}
.pcard .rule{width:44px;height:2px;background:var(--green-soft);margin-bottom:13px}
.pcard p{color:var(--ink-soft);font-size:.94rem;max-width:54%}
.pcard .visual{position:absolute;right:18px;bottom:24px;display:flex;align-items:flex-end}
.pcard .visual img{display:block}
.pcard:nth-child(1) .visual img{width:112px;height:auto}
.pcard:nth-child(2) .visual img{width:150px;height:auto;max-height:230px;object-fit:contain}
.pcard:nth-child(3) .visual img{width:150px;height:auto;max-height:150px;object-fit:contain}
.pcard .go{margin-top:auto;padding-top:16px;color:var(--forest);font-weight:700;font-size:.86rem;display:flex;align-items:center;gap:6px}

/* ---------- reassurance line ---------- */
.reassure{padding:18px 0;text-align:center}
.reassure-line{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;color:#6a6a5c;font-size:1.04rem}
.reassure-line svg{width:21px;height:21px;color:var(--green-soft)}
.reassure-line b{color:var(--forest);font-weight:700}

/* ---------- generic section ---------- */
.section{padding:56px 0}
.section-narrow{max-width:760px;margin:0 auto;padding:0 40px}
@media(max-width:720px){.section-narrow{padding:0 22px}}
.section h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:18px}
.section-lead{color:var(--ink-soft);font-size:1.08rem;max-width:620px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:860px){.two-col{grid-template-columns:1fr;gap:28px}}
.mission-intro .hero-photo{width:min(100%,400px);justify-self:end}
@media(max-width:860px){.mission-intro .hero-photo{justify-self:center}}
.stack p{color:var(--ink-soft);margin-bottom:14px;font-size:1.01rem}
.stack p:last-child{margin-bottom:0}

/* ---------- about ---------- */
.about-header{padding-bottom:30px}
.about-kicker{padding:44px 0 0;text-align:center}
.about-kicker .eyebrow{justify-content:center;margin-bottom:0}
.about-kicker+#team{padding-top:24px}
.support-search{padding-bottom:0}
.support-search+.about-header{padding-top:0}
.about-intro{padding-top:24px}
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.about-visual{background:var(--panel);border-radius:22px;min-height:360px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:flex-end;padding:28px}
.about-visual img{max-height:310px;max-width:72%;width:auto;margin-left:auto;border-radius:18px;mix-blend-mode:multiply}
.about-note{position:absolute;top:30px;left:30px;color:var(--forest);font:500 1.35rem/1.16 "Fraunces",Georgia,serif}
.about-note span{font-size:1rem;font-style:italic;color:var(--green)}
.about-values-section{background:rgba(235,233,223,.45)}
.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.about-values article{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.about-icon{width:44px;height:44px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:14px}
.about-icon svg{width:22px;height:22px}
.about-values h3{font-size:1.12rem;margin-bottom:8px}
.about-values p,.about-team p{color:var(--ink-soft);font-size:.96rem}
.about-team{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;max-width:900px}
.about-team h2{margin-bottom:14px}
.about-team p{margin-bottom:14px}
.about-team .btn{margin-top:8px}
.about-quote{background:var(--forest);color:var(--cream);border-radius:20px;padding:34px 32px}
.about-quote svg{width:26px;height:26px;color:var(--green-soft);margin-bottom:14px}
.about-quote p{font:500 1.45rem/1.25 "Fraunces",Georgia,serif;color:#fff;margin:0 0 12px}
.about-quote span{font-size:.91rem;color:rgba(250,246,240,.75)}
@media(max-width:860px){.about-intro-grid,.about-team{grid-template-columns:1fr;gap:30px}.about-values{grid-template-columns:1fr}.about-visual{min-height:300px}.about-visual img{max-height:250px}}

/* ---------- funnel / arc diagram (mission page) ---------- */
.funnel{display:flex;gap:0;flex-wrap:wrap;justify-content:center;margin:32px 0}
.funnel-step{background:var(--card);border-radius:16px;padding:22px 20px;text-align:center;width:190px;position:relative}
.funnel-step .n{width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Fraunces";font-weight:600;margin:0 auto 10px}
.funnel-step h4{font-size:1rem;margin-bottom:6px}
.funnel-step p{font-size:.85rem;color:var(--ink-soft)}
.funnel-arrow{align-self:center;color:var(--green-soft);font-size:1.4rem;padding:0 10px}
@media(max-width:900px){.funnel-arrow{transform:rotate(90deg);padding:6px 0}}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
@media(max-width:860px){.team-grid{grid-template-columns:repeat(2,1fr)}}
.team-card{background:var(--panel);border-radius:16px;padding:24px 20px;text-align:center}
.team-card .avatar{width:104px;height:104px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--green)}
.team-card .avatar svg{width:38px;height:38px}
.team-card h4{font-size:1rem;margin-bottom:4px}
.team-card p{font-size:.83rem;color:var(--ink-soft)}
.team-card p strong{display:block;color:var(--forest);font-size:.79rem;letter-spacing:.04em;margin-bottom:6px}
.team-card--row-center-start{grid-column:2}
@media(max-width:860px){.team-card--row-center-start{grid-column:auto}}

/* ---------- product detail pages ---------- */
.product-hero{padding:20px 0 40px}
.product-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
@media(max-width:900px){.product-hero-grid{grid-template-columns:1fr;gap:32px}}
.product-visual{background:var(--card);border-radius:22px;padding:40px;display:flex;align-items:center;justify-content:center}
.product-visual img{width:auto;max-height:340px}
#plants .product-visual{min-height:460px;padding:24px}
#plants .product-visual img{max-height:420px;max-width:95%}
/* The 3D product preview: Pickle Lab's <three-d-stage> laid over the card's
   content box -- inset by the card's own padding, so it is the box the still
   sat in and the pickle turns at the size the photograph was. It has that size
   from the moment it boots (a stage that measured itself at height:0 handed
   three.js a 2px canvas) and fades in over the picture once the object is up. */
.pickle-preview .product-visual{position:relative}
.product-visual three-d-stage{position:absolute;inset:40px;width:auto;height:auto;border-radius:14px;overflow:hidden;--stage-bg:var(--card);opacity:0;transition:opacity .45s ease}
/* width/height auto on purpose: the stage's own :host sets both to 100%, and with
   position:absolute those beat the inset -- it came out card-sized, overflowing. */
.product-visual three-d-stage:not(:defined),.product-visual three-d-stage[hidden]{display:none}
.pickle-preview.is-3d three-d-stage{opacity:1}
.pickle-preview.is-3d img{visibility:hidden}
@media(max-width:900px){.product-visual three-d-stage{inset:22px}}
.product-hero h1{font-size:clamp(2.1rem,4.6vw,3.1rem);margin-bottom:16px}
.product-hero p.lede{font-size:1.1rem;color:var(--ink-soft);margin-bottom:24px}
.price-tag{font-family:"Fraunces";font-size:1.6rem;color:var(--forest);margin-bottom:22px}
.price-tag .from{font-size:.9rem;color:var(--ink-soft);font-family:"Mulish";display:block;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.feature-list{list-style:none;margin:0 0 28px;display:flex;flex-direction:column;gap:12px}
.feature-list li{display:flex;gap:10px;font-size:.98rem;color:var(--ink)}
.feature-list svg{flex:none;width:20px;height:20px;color:var(--green);margin-top:1px}
.coming-soon-note{margin-top:20px;color:var(--forest);font-weight:700}

.how-it-works{background:var(--panel);border-radius:20px;padding:44px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:24px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{text-align:center}
.step .num{font-family:"Fraunces";font-size:1.7rem;color:var(--forest);margin-bottom:8px}
.step h4{font-size:1rem;margin-bottom:6px}
.step p{font-size:.9rem;color:var(--ink-soft)}

/* ---------- shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
@media(max-width:900px){.shop-grid{grid-template-columns:1fr}}
.shop-card{background:var(--card);border-radius:20px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.shop-card .thumb{background:var(--panel);padding:32px;display:flex;align-items:center;justify-content:center;min-height:220px}
.shop-card .thumb img{max-height:180px;width:auto}
.shop-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.shop-card h3{font-size:1.18rem}
.shop-card p{color:var(--ink-soft);font-size:.92rem;flex:1}
.shop-card .price{font-family:"Fraunces";color:var(--forest);font-size:1.15rem}
.buy-slot{min-height:52px;display:flex;align-items:center}
.buy-placeholder{width:100%;text-align:center;font-size:.82rem;color:var(--ink-soft);border:1.5px dashed var(--line);border-radius:12px;padding:12px}
.soon-tag{display:inline-flex;align-items:center;gap:7px;background:var(--green);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:999px;white-space:nowrap}
.soon-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:.85}
.hero-btns .soon-tag{align-self:center}
.buy-placeholder .soon-tag{margin-bottom:8px}
.stretch-tag{display:inline-block;background:var(--panel);color:var(--forest);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:4px;align-self:flex-start}
.shop-note{background:var(--panel);border-radius:16px;padding:20px 24px;font-size:.88rem;color:var(--ink-soft);margin-top:32px}

/* ---------- party ---------- */
.party-hero{background:var(--forest);color:var(--cream);border-radius:24px;padding:52px 44px;display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
@media(max-width:860px){.party-hero{grid-template-columns:1fr;padding:38px 26px;text-align:center}}
.party-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:14px}
.party-hero p{color:rgba(250,246,240,.82);font-size:1.05rem;margin-bottom:22px}
.party-hero .eyebrow{color:var(--green-soft)}
.party-card{background:rgba(250,246,240,.08);border:1px solid rgba(250,246,240,.22);border-radius:18px;padding:26px}
.party-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:.95rem}
.party-card dt{color:var(--green-soft);font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;padding-top:2px}
.party-card dd{color:#fff}
.sponsor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:24px}
@media(max-width:860px){.sponsor-grid{grid-template-columns:1fr}}
.sponsor-card{border:1.5px solid var(--line);border-radius:16px;padding:24px}
.sponsor-card h4{margin-bottom:8px}
.sponsor-card p{color:var(--ink-soft);font-size:.9rem}
.rsvp-box{background:var(--card);border-radius:20px;padding:36px 40px;text-align:center}
.rsvp-box .btn{margin-top:8px}
.rsvp-copy{color:var(--ink-soft);max-width:570px;margin:0 auto 22px}
.rsvp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:760px;margin:0 auto 22px;text-align:left;counter-reset:none}
.rsvp-steps li{background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:14px;padding:13px 14px;display:flex;align-items:flex-start;gap:9px;font-size:.88rem;line-height:1.4;color:var(--ink-soft)}
.rsvp-steps span{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--forest);color:#fff;font-size:.74rem;font-weight:700}
.rsvp-status{max-width:520px;margin:0 auto 12px;padding:13px 16px;border-radius:12px;background:rgba(154,167,127,.18);color:var(--forest);font-size:.9rem}
.rsvp-status strong,.rsvp-status span{display:block}.rsvp-status span{margin-top:2px;color:var(--ink-soft)}
.eventbrite-cta{margin-top:4px!important}.rsvp-reminder{display:block;width:max-content;max-width:100%;margin:14px auto 0;color:var(--forest);font-weight:700;font-size:.88rem;text-underline-offset:3px}
@media(max-width:720px){.rsvp-steps{grid-template-columns:1fr;text-align:left}.rsvp-steps li{padding:12px 14px}}

/* ---------- video / support library ---------- */
.search-band{background:var(--panel);border-radius:22px;padding:36px 40px;text-align:center}
@media(max-width:720px){.search-band{padding:28px 22px}}
.search-band h2{margin-bottom:18px}
.search-form{display:flex;gap:10px;max-width:560px;margin:0 auto}
.search-form input{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:14px 22px;font-size:1rem;font-family:"Mulish";color:var(--ink)}
.search-form input:focus{outline:none;border-color:var(--green)}
.mood-picker{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.mood-chip{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;transition:all .15s}
.mood-chip:hover{border-color:var(--green)}
.mood-chip.active{background:var(--btn);border-color:var(--btn);color:#fff}
.gallery-filters{display:flex;align-items:flex-end;justify-content:center;gap:18px;flex-wrap:wrap}
.category-filter{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-size:.84rem;font-weight:700;white-space:nowrap}
.category-filter select{appearance:none;border:1.5px solid var(--line);border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%2334502e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center/18px;padding:9px 38px 9px 16px;color:var(--ink);font:600 .88rem "Mulish",sans-serif;cursor:pointer}
.category-filter select:focus{outline:2px solid var(--green-soft);outline-offset:2px}

.gallery-player{max-width:960px;margin:30px auto 12px;background:var(--forest-deep);border-radius:22px;padding:20px;box-shadow:0 18px 50px rgba(25,42,24,.18);scroll-margin-top:128px}
.gallery-player-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:2px 4px 15px}
.gallery-player-heading h3{color:#fff;font-size:clamp(1.25rem,2.5vw,1.7rem)}
.gallery-player-heading a{color:var(--green-soft);font-size:.82rem;font-weight:700;text-decoration:none;white-space:nowrap}
.gallery-player-heading a:hover{text-decoration:underline;text-underline-offset:3px}
.gallery-player-frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}
.gallery-player-frame iframe{display:block;width:100%;height:100%;border:0}
.video-library{margin-top:34px}
.video-group{margin-top:54px;scroll-margin-top:130px}
.video-group:first-child{margin-top:26px}
.video-group-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;border-bottom:1.5px solid var(--line);padding-bottom:14px;margin-bottom:20px}
.video-group-heading h3{font-size:clamp(1.55rem,3vw,2rem);color:var(--forest)}
.video-group-heading>p{max-width:440px;text-align:right;color:var(--ink-soft);font-size:.92rem}
.video-group-kicker{margin-bottom:2px;color:var(--green);font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.video-group-featured{background:var(--forest);border-radius:24px;padding:28px}
.video-group-featured .video-group-heading{border-color:rgba(255,255,255,.18)}
.video-group-featured .video-group-heading h3{color:#fff}
.video-group-featured .video-group-heading>p{color:rgba(255,255,255,.72)}
.video-group-featured .video-group-kicker{color:var(--green-soft)}
.video-group-featured .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.video-grid,.video-group-featured .video-grid{grid-template-columns:1fr}.video-group-featured{padding:22px 16px}.video-group-heading,.gallery-player-heading{display:block}.video-group-heading>p{text-align:left;margin-top:5px}.gallery-player{padding:12px}.gallery-player-heading a{display:inline-block;margin-top:7px}.gallery-player-frame{border-radius:10px}}
.video-card{background:var(--card);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 28px rgba(30,50,28,.06);transition:transform .18s ease,box-shadow .18s ease}
.video-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(30,50,28,.11)}
.video-card.is-playing{box-shadow:0 0 0 3px var(--green-soft),0 12px 32px rgba(30,50,28,.14)}
.video-card.is-youtube-only .video-duration:before{content:"YouTube only · "}
.video-thumb{aspect-ratio:16/9;background:var(--panel);position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}
.video-thumb:focus-visible{outline:3px solid var(--green-soft);outline-offset:-3px}
.video-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.video-card:hover .video-thumb>img{transform:scale(1.025)}
.video-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(18,34,17,.38));pointer-events:none}
.video-thumb .play{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;background:rgba(52,80,46,.92);box-shadow:0 4px 16px rgba(0,0,0,.25);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .18s ease,background .18s ease}
.video-thumb:hover .play{transform:scale(1.08);background:var(--forest-deep)}
.video-thumb .play svg{width:20px;height:20px;margin-left:3px}
.video-thumb iframe{position:absolute;z-index:3;inset:0;width:100%;height:100%;border:none}
.video-duration{position:absolute;z-index:2;right:10px;bottom:9px;padding:4px 8px;border-radius:6px;background:rgba(18,34,17,.86);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.04em}
.video-body{padding:16px 18px 18px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.video-body h4{font-size:1rem;margin:8px 0 5px;line-height:1.3}
.video-body p{color:var(--ink-soft);font-size:.86rem;line-height:1.5;margin-bottom:14px}
.video-tags{display:flex;gap:6px;flex-wrap:wrap}
.video-tags span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--green);background:#fff;padding:3px 9px;border-radius:999px}
.video-youtube-link{margin-top:auto;color:var(--forest);font-size:.78rem;font-weight:700;text-decoration:none}
.video-youtube-link:hover{text-decoration:underline;text-underline-offset:3px}
.no-results{text-align:center;padding:40px 20px;color:var(--ink-soft);display:none}
.no-results.show{display:block}

/* ---------- footer ---------- */
footer.site-footer{background:var(--forest-deep);color:rgba(250,246,240,.86);margin-top:24px}
.footer-top{padding:56px 0 40px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:36px}
@media(max-width:860px){.footer-top{grid-template-columns:1fr 1fr;row-gap:32px}}
@media(max-width:540px){.footer-top{grid-template-columns:1fr}}
footer .logo-text{color:#fff}
footer .logo svg{color:var(--green-soft)}
.footer-blurb{color:rgba(250,246,240,.66);font-size:.9rem;margin-top:12px;max-width:280px}
.footer-col h5{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.footer-col a{display:block;color:rgba(250,246,240,.72);text-decoration:none;font-size:.92rem;margin-bottom:10px}
.footer-col a:hover{color:#fff}
.newsletter-form{display:flex;gap:8px;margin-top:14px}
.newsletter-form input{flex:1;min-width:0;border:1px solid rgba(250,246,240,.28);background:rgba(250,246,240,.08);border-radius:999px;padding:11px 16px;color:#fff;font-family:"Mulish";font-size:.9rem}
.newsletter-form input::placeholder{color:rgba(250,246,240,.5)}
.newsletter-form input:focus{outline:none;border-color:var(--green-soft)}
.newsletter-form button{background:var(--green-soft);color:var(--forest-deep);border:none;border-radius:999px;padding:0 18px;font-weight:700;cursor:pointer;font-size:.88rem}
.newsletter-form button:hover{background:#fff}
.newsletter-note{font-size:.76rem;color:rgba(250,246,240,.5);margin-top:10px}
.newsletter-success{display:none;font-size:.88rem;color:#fff;background:rgba(154,167,127,.25);border-radius:10px;padding:10px 14px;margin-top:12px}
.newsletter-success.show{display:block}
.footer-bottom{border-top:1px solid rgba(250,246,240,.14);padding:22px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(250,246,240,.55)}
.footer-crisis{font-size:.82rem;color:rgba(250,246,240,.7);padding:2px 0 22px;max-width:820px}
.footer-crisis b{color:#fff}
.footer-crisis a{color:#fff;text-decoration:underline}

/* ---------- pickle wisdom (puns + tips) ---------- */
.wisdom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
@media(max-width:900px){.wisdom-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.wisdom-grid{grid-template-columns:1fr}}
.wisdom-card{background:var(--card);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.wisdom-card .emoji{font-size:1.5rem;line-height:1}
.wisdom-card h3{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;color:var(--forest);font-size:1.22rem;line-height:1.25}
.wisdom-card p{color:var(--ink-soft);font-size:.92rem}
.wisdom-card .tag{align-self:flex-start;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--green);background:#fff;padding:3px 10px;border-radius:999px;margin-top:2px}

/* ---------- misc ---------- */
.badge-soon{display:inline-block;background:var(--panel);color:var(--forest);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.divider{height:1px;background:var(--line);margin:8px 0}
.center{text-align:center}

/* ==========================================================================
   Mobile refinements — touch targets, scannable chip rows, tighter spacing,
   full-width thumb-friendly CTAs, and iOS input-zoom prevention.
   ========================================================================== */

/* Bigger, more reliable tap targets for the two icon-only buttons in the header */
.crisis-close{padding:10px;margin:-10px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.nav-toggle{padding:10px;min-width:44px;min-height:44px;justify-content:center}

/* Chip rows (mood filters) scroll horizontally on phones instead of wrapping
   into a wall of pills before any real content shows up */
@media(max-width:640px){
  .mood-picker{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin-bottom:-2px}
  .mood-picker::-webkit-scrollbar{display:none}
  .mood-chip{flex:none;white-space:nowrap}
}

/* Primary CTA pairs stack full-width for easier thumb taps */
@media(max-width:520px){
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{width:100%;justify-content:center}
}

/* Footer newsletter input: 16px min font-size stops iOS from auto-zooming on focus */
.newsletter-form input{font-size:1rem;padding:13px 16px}
.newsletter-form button{padding:0 20px}

/* Nav logo: prevent an awkward mid-word wrap on the narrowest phones */
@media(max-width:400px){.logo-text{font-size:1.12rem}}

/* Party details list: label-above-value reads better than a cramped two-up row */
@media(max-width:480px){
  .party-card dl{grid-template-columns:1fr}
  .party-card dt{padding-top:8px}
  .party-card dt:first-child{padding-top:0}
}

/* Tighter section rhythm on small phones so scrolling feels efficient, not padded-out */
@media(max-width:480px){
  .section{padding:36px 0}
  .page-header{padding:36px 0 26px}
  .how-it-works{padding:26px 20px}
  .product-visual{padding:22px}
  .rsvp-box{padding:26px 22px}
  .party-hero{padding:28px 20px}
  .search-band{padding:22px 18px}
  .mission-inner{padding:26px 20px}
  .crisis-box{padding:18px 20px}
  .wisdom-card{padding:22px 20px}
  .shop-card .body{padding:20px 20px 22px}
  .pcard{padding:24px 22px;min-height:auto}
}

/* ---------- Founder bios (About Us) ----------
   Kept off the homepage per Allison — "not on the homepage but like on a
   separate page" — so these live on about.html only. Stacked rather than
   side by side: the two bios differ wildly in length, and a two-up grid
   leaves one column stranded next to a wall of text. */
.bio-list{display:grid;gap:34px;margin-top:32px}
.bio{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 34px;display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start}
.bio-head{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}
.bio-figure{width:100%;max-width:200px;aspect-ratio:3/4;border-radius:16px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--green);overflow:hidden}
.bio-figure img{width:100%;height:100%;object-fit:cover;display:block}
.bio-figure svg{width:44px;height:44px}
.bio-head h3{font-size:1.34rem;margin-bottom:3px}
.bio-role{color:var(--green);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.bio-body p{color:var(--ink-soft);font-size:.97rem}
.bio-body p+p{margin-top:14px}
@media(max-width:860px){
  .bio{grid-template-columns:1fr;gap:22px;padding:28px 26px}
  .bio-head{position:static;flex-direction:row;align-items:center;gap:18px}
  .bio-figure{max-width:118px;border-radius:14px}
  .bio-figure svg{width:32px;height:32px}
}
@media(max-width:480px){.bio{padding:24px 22px}}

/* Headshots: an <img> in .avatar crops to the circle; .bio-figure takes a 3:4 portrait. */
.team-card .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 35%}
@media(max-width:460px){.team-grid{grid-template-columns:1fr}}

/* ==========================================================================
   One-page layout — every former page is now a <section class="page"> on
   index.html; the header links jump to them by #id.
   ========================================================================== */
html{scroll-padding-top:96px}           /* keep sticky nav from covering anchor targets */
.page{position:relative}
.page.alt{background:rgba(235,233,223,.45)}
.page .page-header{padding-top:72px}
.page .about-header{padding-bottom:30px}
.page .about-values-section{background:transparent}
.page-header h2{font-size:clamp(2.1rem,5vw,3.3rem);margin-bottom:14px}
.page .mission-header{padding:42px 0 28px}
.page-header.mission-header h2{font-size:clamp(2rem,4.5vw,2.9rem);max-width:900px;margin:0 auto 14px;line-height:1.12}
.page-header.mission-header p{max-width:850px;font-size:1rem;line-height:1.55}
.product-hero h2{font-size:clamp(2.1rem,4.6vw,3.1rem);margin-bottom:16px}
.party-hero h2{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-bottom:14px}
#team .team-grid{margin-bottom:8px}
@media(max-width:480px){.page .page-header{padding-top:44px}}

/* ==========================================================================
   Parallax + reveal-on-scroll (assets/js/main.js drives the transforms).
   data-parallax="0.2"  → element lags the scroll by 20% (feels further away)
   data-parallax="-0.1" → element leads the scroll (feels closer)
   data-parallax-fixed  → shape in the fixed backdrop, drifts with scrollY
   ========================================================================== */
[data-parallax]{will-change:transform}
.px-scene{position:relative;overflow:hidden;overflow:clip}
.px-float{position:absolute;pointer-events:none;color:var(--green-soft);opacity:.16;z-index:0}
.px-scene>.wrap,.px-scene>.section,.px-scene>.page-header,.px-scene>.product-hero,.px-scene>.reassure,.px-scene>*:not(.px-float){position:relative;z-index:1}
.hero-grid .px-float{z-index:0}
.hero-grid>*:not(.px-float){position:relative;z-index:1}
.px-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.px-backdrop svg{position:absolute;color:var(--forest);opacity:.045;will-change:transform}
.party-hero .px-float{color:var(--cream)}
.mission-inner .px-float{color:var(--green)}

.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].in{opacity:1;transform:none}
.js .team-card[data-reveal]:nth-child(2),.js .about-values article[data-reveal]:nth-child(2),.js .pcard[data-reveal]:nth-child(2),.js .sponsor-card[data-reveal]:nth-child(2){transition-delay:.08s}
.js .team-card[data-reveal]:nth-child(3),.js .about-values article[data-reveal]:nth-child(3),.js .pcard[data-reveal]:nth-child(3),.js .sponsor-card[data-reveal]:nth-child(3){transition-delay:.16s}
.js .team-card[data-reveal]:nth-child(4){transition-delay:.24s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-parallax],.px-backdrop svg{transform:none!important}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}
/* keep the product-card hover lift working after it has been revealed */
.js a.pcard[data-reveal].in{transition:transform .18s,box-shadow .18s}
.js a.pcard[data-reveal].in:hover{transform:translateY(-3px)}
@media print{.js [data-reveal]{opacity:1;transform:none}.px-backdrop,.px-float{display:none}}

/* Gallery address and responsive location map */
.gallery-location{width:100%;max-width:720px;margin:22px auto}
.gallery-location address{font-style:normal;margin-bottom:12px;color:var(--forest);font-weight:600}
.gallery-location address a{text-underline-offset:3px}
.gallery-map{display:block;width:100%;height:300px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}

.pickle-preview{min-width:0}
.pickle-preview .product-visual{min-height:320px}
.pickle-preview-controls{text-align:center;padding:18px 16px}
.pickle-preview-controls p{font-size:.88rem;margin:12px 0 0}
.pickle-preview-controls .btn{line-height:1.3;max-width:100%;justify-content:center}
.pickle-preview-status{color:var(--ink-soft);min-height:1.5em}
.shop-card .thumb{min-height:0;aspect-ratio:1/1}
.shop-card .thumb img{max-height:250px;max-width:86%;width:auto}
#about>.support-search+.about-header{padding-top:0}