/* Shared design values measured from the Bewellfed reference. */
:root {
  --cream: #fff6e8;
  --paper: #ffffff;
  --green: #034c29;
  --dark: #023a1f;
  --lime: #f9c0d1;
  /* pale pink is for fills; type needs a pink that holds up on cream */
  --pink-ink: #c43d73;
  --sage: #fdf0f4;
  --muted: #204a2d;
  --line: #034c2933;
  --serif: 'Libre Caslon Condensed', Georgia, serif;
  --sans: 'Switzer', Arial, sans-serif;
  --gutter: max(30px, calc((100vw - 1340px) / 2));
  /* One rhythm for the whole page. Sections used to carry anywhere from 24px
     to 160px of their own padding, so the gap at any seam was whichever pair
     happened to meet - up to 260px. One value keeps every seam equal, and a
     smaller one is what was asked for. */
  --band: 76px;
}
body { background: var(--paper); font-weight: 500; }
html { scroll-padding-top: 118px; }
h1,h2,h3,em { font-family: var(--serif); font-weight: 500; letter-spacing: normal; }
h2 { font-size: 58px; line-height: 1.1; padding-bottom: 4px; }

/* The italic is the accent all the way through, so it is pink everywhere the
   background is light. On the dark green bands it takes the pale pink instead:
   the ink pink is a readable colour on cream and white, and nothing at all on
   green. */
h1 em, h2 em, h3 em, .hero h1 em, .approach h2 em { color: var(--pink-ink); }
.process em, .food-banner-copy em, .meal-inspiration em, .proof-band em,
.footer em, .motivation-dark em,
/* the page banner is green unless it has been made plain */
.page-intro-panel:not(.is-plain) em { color: var(--lime); }
h3 { font-size: 30px; line-height: 1.1; }
.section { padding: var(--band) var(--gutter); }
.section h2,.section-heading h2,.centered-heading h2,.food-banner-copy h2,.faq-intro h2,.ambica-copy h2,.contact-copy h2 { font-size: 58px; line-height: 1.1; letter-spacing: normal; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 50px; background: var(--cream); color: var(--green); font: 500 16px/1.3 var(--sans); letter-spacing: 0; margin-bottom: 16px; }
.eyebrow:before,.eyebrow:after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.centered-heading { text-align: center; max-width: 900px; margin: 0 auto 50px; }
.centered-heading h2 { margin: 0; }
.button { font-size: 16px; min-height: 62px; padding: 20px 34px; border-radius: 6px; font-weight: 500; }
.button-dark,.button-outline:hover { background: var(--green); color: var(--lime); }
.button-lime { background: var(--lime); border: 1px solid var(--green); }
.button-small { min-height: 38px; padding: 8px 18px; }
.text-link { font-size: 16px; }
.site-header { background: var(--cream); border-bottom: 0; backdrop-filter: none; }
.header-inner { height: 98px; gap: 24px; }
.desktop-nav,.header-actions { font-size: 16px; gap: 24px; }
.site-header .brand { height: 92px; }
.site-header .brand-logo { height: 116px; width: 483.333px; }
.hero { background: var(--cream); }
.hero-kicker { color: var(--green); }
.hero-description { color: var(--muted); line-height: 1.3; }
.hero-ctas .button { background: var(--lime); }
.hero-features > span { color: var(--muted); }
.hero .hero-image-frame { border-radius: 500px 0 0 500px; }
.proof-band { padding: 40px var(--gutter); }
.proof-stat strong { font-size: 58px; }
.proof-stat > span { font-size: 14px; max-width: 140px; }
.proof-intro p { font-size: 20px; }
.proof-intro em { font-size: 28px; }
.approach { background: var(--paper); padding-top: var(--band); padding-bottom: var(--band); }
.approach-inner { max-width: 800px; }
.approach-inner > p { font-size: 18px; line-height: 1.5; max-width: 650px; }
.approach-values { gap: 48px; margin: 38px 0; }
.approach-values > div { font-size: 16px; }
.approach-values .icon { color: #9ebf65; width: 42px; height: 42px; }
.approach .text-link { font-size: 15px; }
.transformations { background: var(--paper); }
.section-heading { margin-bottom: 50px; }
.section-heading > p,.section-heading-aside > p { font-size: 16px; line-height: 1.4; }
.drag-hint { font-size: 14px; }
.transformation-card { border: 1px solid var(--line); padding: 10px 10px 0; border-radius: 6px; }
/* A pair of separate before-and-after photographs, each framed by the position
   chosen in the admin panel. */
.comparison-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.transformation-info h3 { font-family: var(--serif); font-size: 23px; line-height: 1.1; font-weight: 500; }
.transformation-info p { font-size: 13px; }
.comparison-label { font-size: 10px; }
.gallery-footer > p { font-size: 14px; }
.gallery-footer > p > span { font-size: 12px; }
.ambica { background: var(--paper); gap: 80px; }
.ambica-copy > p { font-size: 16px; line-height: 1.5; }
.ambica-copy blockquote { font-size: 30px; border-color: var(--lime); }
/* The two sentences are wrapped so a phone can place them separately; on a
   wide screen they simply stack, exactly as the line breaks used to. */
.ambica-copy h2 .ambica-line { display: block; }
/* Breaks that only apply on a phone; the space beside them carries the gap. */
br.on-phone { display: none; }
.ambica-copy .button { font-size: 16px; }
.ambica-signoff > span:last-child { font-size: 15px; }
.ambica-signoff small { font-size: 12px; }
.photo-sticker { display: none; }
.photo-credit { font-size: 11px; letter-spacing: .2px; }
.process { background: var(--green); color: var(--paper); padding-top: var(--band); padding-bottom: var(--band); }
.process .section-heading { display: block; text-align: center; }
.process .section-heading h2 br { display: none; }
.process .section-heading > p { margin-top: 20px; color: #ffffffb3; }
.process .eyebrow { background: #ffffff1a; color: white; }
.process-grid { gap: 30px; }
.process-step { background: var(--lime); color: var(--green); border: 0; border-radius: 6px; min-height: 337px; padding: 95px 30px 35px; text-align: center; }
.process-step:nth-child(2) { background: var(--cream); }
.process-step:nth-child(3) { background: var(--paper); }
.process-step > .icon { display: none; }
.step-number { top: 30px; left: 50%; right: auto; transform: translateX(-50%); width: 50px; height: 50px; display: grid; place-items: center; border-radius: 100%; background: white; font: 500 26px var(--serif); }
.process-step:nth-child(3) .step-number { background: var(--cream); }
.process-step h3 { font-size: 36px; max-width: none; margin: 20px 0; }
.process-step p { font-size: 16px; line-height: 1.4; max-width: none; color: var(--muted); }
.motivation,.motivation-sticky { background: white; }
.motivation-image img { object-position: center; }
.motivation-sticky { top: 98px; height: calc(100vh - 98px); }
.motivation-words { color: #204a2d; }
.motivation-copy > .eyebrow { font-size: 13px; align-self: flex-start; }
.motivation-description p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.motivation-description { min-height: 135px; max-width: 380px; }
.motivation-copy > .text-link { font-size: 15px; }

/* Pricing: three differently colored outer cards, each with an inset summary. */
.plans { background: white; padding-bottom: var(--band); }
.plan-tabs { margin-top: -15px; margin-bottom: 40px; background: var(--sage); border: 1px solid var(--line); }
.plan-tabs button { font-size: 14px; padding: 12px 22px; }
.plan-tabs button[aria-selected=true] { background: var(--green); color: var(--lime); }
.plan-grid { gap: 30px; align-items: stretch; min-height: 0; }
#plan-panel[data-count="4"] { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 940px; margin-inline: auto; }
/* Below 950 the grid is one column; the four-card category has to follow, or
   the cards end up as two very narrow columns on a phone. */
@media (max-width: 950px) {
  #plan-panel[data-count="4"] { grid-template-columns: 1fr; max-width: 600px; }
}
.plan-card { display: flex; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--green); box-shadow: none; }
.plan-card.featured { background: var(--lime); border-color: var(--lime); color: var(--green); }
.plan-card:nth-child(3) { background: var(--cream); border-color: var(--cream); }
.plan-overview { position: relative; padding: 30px; border-radius: 4px; background: #034c290f; min-height: 250px; }
.featured .plan-overview,.plan-card:nth-child(3) .plan-overview { background: white; }
.plan-card h3 { font-size: 30px; line-height: 1.1; margin: 0; font-weight: 500; }
.plan-description { color: var(--muted); font-size: 16px; line-height: 1.4; max-width: none; min-height: 68px; margin: 14px 0 0; }
.plan-card.featured .plan-description,.plan-card.featured .plan-price small { color: var(--muted); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; margin: 20px 0 0; font: 500 58px/1.1 var(--serif); letter-spacing: normal; }
.plan-price .currency { font-family: var(--serif); font-size: 48px; vertical-align: baseline; align-self: auto; margin: 0; }
.plan-price small { font: 500 16px/1.4 var(--sans); color: var(--muted); margin-left: 4px; }
.plan-details { padding: 30px; display: flex; flex-direction: column; flex: 1; }
.plan-card ul { padding: 0; margin: 0 0 30px; display: grid; gap: 20px; border: 0; }
.plan-card li { font-size: 16px; line-height: 1.4; color: var(--muted); gap: 8px; }
.plan-card li > .icon { display: none; }
.plan-card li:before { content: '›'; color: var(--green); font-size: 23px; line-height: 21px; }
.plan-card .button { width: 100%; margin-top: auto; background: var(--green); color: var(--lime); font-size: 16px; min-height: 62px; padding: 18px 14px; border: 1px solid #f9c0d140; }
.plan-card .button .icon { display: none; }
.plan-card.featured .button { background: var(--green); color: var(--lime); }
.plan-card .button { justify-content: center; }
.plan-card .button:hover { background: var(--dark); }
.plan-duration { text-align: center; color: var(--muted); font-size: 14px; margin-top: 10px; }
.plan-badge { position: absolute; top: 15px; right: 15px; left: auto; transform: none; padding: 4px 9px; color: var(--green); background: var(--lime); border-radius: 50px; font: 500 12px/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; }
.plan-card:has(.plan-badge) h3 { max-width: calc(100% - 60px); }
.plan-help { font-size: 15px; margin-top: 30px; }
.weight-choice-label { color: var(--muted); font-size: 13px; }
.weight-choice { background: white; }

/* Testimonials: the reference's loose, tilted arrangement rather than a grid. */
.voices { background: white; overflow: hidden; padding: var(--band) 0; }
.voices > .centered-heading { padding: 0 24px; margin-bottom: 0; }
.testimonials-window { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: max(24px, calc(50vw - 580px)); padding: 60px max(24px, calc(50vw - 580px)) 110px; }
.testimonials-window::-webkit-scrollbar { display: none; }
.testimonials-window:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.testimonial-fan { display: flex; align-items: flex-start; gap: 120px; width: max-content; padding-right: 80px; }
.voices .celebrity-grid,.voices .quote-grid { display: contents; }
.testimonial-card { flex: 0 0 340px; width: 340px; height: 430px; margin: 0; border: 0; border-radius: 4px; scroll-snap-align: center; transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotation, 0deg)); transform-origin: center; will-change: transform; }
.voices .quote-card { background: var(--cream); padding: 30px; display: flex; flex-direction: column; }
.testimonial-avatar,.quote-initial.testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-bottom: 24px; }
.quote-initial.testimonial-avatar { display: grid; place-items: center; font: 500 25px var(--serif); background: var(--sage); }
.voices .quote-mark { color: #ec940b; font: 500 58px/.6 var(--serif); height: 35px; margin: 0 0 10px; }
.voices .quote-card blockquote { color: var(--green); font: 500 16px/1.4 var(--sans); margin: 0; }
.voices .quote-author { margin-top: auto; padding-top: 25px; }
.voices .quote-author > span { font: 500 24px/1.1 var(--serif); }
.voices .quote-author small { font: 500 13px/1.4 var(--sans); letter-spacing: 0; margin-top: 5px; color: var(--muted); }
.voices .celebrity-card { aspect-ratio: auto; padding: 0; overflow: hidden; text-align: left; background: var(--green); }
.voices .celebrity-card:hover { transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotation, 0deg)) scale(1.015); }
.voices .celebrity-card:after { background: linear-gradient(#0009, transparent 55%, #0002); }
.voices .celebrity-card video { width: 100%; height: 100%; object-fit: cover; }
.voices .celebrity-name { top: 30px; bottom: auto; left: 30px; right: 25px; font: 500 24px/1.1 var(--serif); }
.voices .celebrity-name small { font: 500 13px/1.4 var(--sans); letter-spacing: 0; margin-top: 6px; }
.voices .play-button { top: auto; left: 22px; bottom: 22px; width: 52px; height: 52px; transform: none; background: var(--lime); border: 0; color: var(--green); }
.voices .play-button .icon { width: 23px; height: 23px; }
.testimonials-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); margin-top: -20px; }
.testimonials-controls p { font-size: 14px; color: var(--muted); }
.testimonials-controls > div { display: flex; gap: 12px; }
.stories-prev .icon { transform: rotate(180deg); }
.community-stats { display: grid; grid-template-columns: repeat(3,1fr); max-width: 800px; margin: 55px auto 0; text-align: center; }
.community-stats > div { display: flex; flex-direction: column; gap: 10px; padding: 0 20px; border-right: 1px solid var(--lime); }
.community-stats > div:last-child { border: 0; }
.community-stats strong { font: 500 58px/1 var(--serif); }
.community-stats strong span { font-size: 36px; }
.community-stats > div > span { font-size: 16px; color: var(--muted); }

/* Lifestyle split: text at left, the same reference photograph in a top arch. */
.food-banner { background: white; color: var(--green); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.food-banner-copy { padding: 0; display: block; }
.food-banner-copy h2 { max-width: 630px; }
.food-banner-copy > p { font-size: 16px; line-height: 1.4; color: var(--muted); margin: 30px 0; max-width: 630px; }
.food-banner-copy .button { padding: 20px 50px; }
.food-banner-image { height: 100%; min-height: 630px; margin: 0; border-radius: 500px 500px 0 0; overflow: hidden; }
.food-banner-image img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.lifestyle-list { margin-top: 60px; }
.lifestyle-list h3 { font-size: 24px; margin-bottom: 25px; }
.lifestyle-list ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; row-gap: 14px; padding-left: 14px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.4; }

.faq { background: white; grid-template-columns: 1fr 1fr; gap: 50px; padding-top: var(--band); padding-bottom: var(--band); align-items: stretch; }
.faq-intro { display: flex; flex-direction: column; justify-content: space-between; gap: 75px; }
.faq-contact-card { width: min(100%,400px); border-radius: 6px; padding: 20px; background: var(--sage); }
.community-avatars { display: flex; padding-left: 0; margin-bottom: 30px; }
.community-avatars img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; margin-left: -8px; }
.community-avatars img:first-child { margin-left: 0; }
.faq-contact-card > p { font-size: 20px; color: var(--muted); margin-bottom: 10px; }
.faq-contact-card .button { min-height: 38px; font-size: 16px; padding: 8px 18px; }
.faq-list { border-top: 0; padding: 0; }
.faq-list details { padding: 0; }
.faq-list summary { font-size: 20px; line-height: 1.4; padding: 27px 0; gap: 25px; }
.faq-list details:first-child summary { padding-top: 8px; }
.faq-list details > p { padding: 0 0 30px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.faq-plus { width: 20px; height: 20px; }
.faq-plus:before,.faq-plus:after { width: 20px; height: 1.5px; top: 9px; left: 0; }
.contact { background: var(--sage); gap: 80px; }
.contact-copy .eyebrow { font-size: 14px; }
.contact-copy > p { font-size: 16px; color: var(--muted); }
.contact-form label { font-size: 16px; }
.contact-form input,.contact-form select,.contact-form textarea { font-size: 16px; border-color: var(--line); }
.contact-form input::placeholder,.contact-form textarea::placeholder { font-size: 14px; }
.contact-form .button { font-size: 16px; }
.form-note { font-size: 12px; }
.contact-phone { font-size: 30px; }
.contact-note { font-size: 13px; }
.footer { background: var(--cream); color: var(--green); padding: var(--band) var(--gutter) 96px; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 55px; }
.footer-brand { margin: -15px 0 0; height: 110px; width: 145px; }
.footer-brand .brand-logo { height: 130px; width: 541.667px; }
.footer h3 { font-size: 24px; color: var(--muted); margin: 0 0 25px; }
.footer-connect { margin-top: 65px; }
.footer-connect > p { font-size: 16px; margin-bottom: 14px; }
.footer .social-links { display: flex; flex-direction: row; gap: 20px; font-size: 16px; align-items: flex-start; }
.footer .social-links a { width: auto; max-width: none; }
.footer .social-links a:hover,.footer nav a:hover { color: var(--dark); text-decoration: underline; }
.footer-top nav { display: grid; grid-template-rows: repeat(5, auto); grid-auto-flow: column; grid-template-columns: 1fr 1fr; gap: 20px 35px; font-size: 16px; }
.footer-contact > a { display: block; font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
.footer-contact p { color: var(--green); font-size: 16px; line-height: 1.6; }
.footer-bottom { border: 0; color: var(--green); font-size: 14px; margin-top: 70px; padding-top: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom > :last-child { justify-self: end; }
/* Who built it — a proper link, not a whisper in the corner. */
.footer-credit { justify-self: center; display: inline-flex; align-items: center; gap: 7px;
  background: var(--green); color: var(--cream); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; letter-spacing: .2px; text-decoration: none;
  transition: background .2s, color .2s; }
.footer-credit b { font-weight: 700; color: var(--lime); }
.footer-credit .icon { width: 14px; height: 14px; }
.footer-credit:hover { background: var(--lime); color: var(--green); }
.footer-credit:hover b { color: var(--green); }
/* WhatsApp's own green, so the button reads as WhatsApp at a glance. */
.whatsapp-float { background: #25d366; color: white; border-color: #1da851; }
.whatsapp-float:hover { background: #1da851; }
.whatsapp-float .icon { fill: currentColor; stroke: none; }

@media (max-width: 1190px) {
  :root { --band: 64px; }
  .desktop-nav,.header-actions { font-size: 13px; gap: 18px; }
  .section h2,.section-heading h2,.centered-heading h2,.food-banner-copy h2,.faq-intro h2,.ambica-copy h2,.contact-copy h2 { font-size: 48px; }
  .ambica,.food-banner,.contact { gap: 40px; }
  .plan-overview,.plan-details { padding: 24px; }
  .plan-price { font-size: 48px; }
  .plan-price .currency { font-size: 40px; }
  .plan-price small { font-size: 13px; }
  .plan-card h3 { font-size: 27px; }
  .plan-description { min-height: 90px; }
  .plan-badge { top: 10px; right: 10px; font-size: 10px; }
  .plan-card:has(.plan-badge) h3 { max-width: none; }
  .plan-card:has(.plan-badge) .plan-overview { padding-top: 40px; }
  .plan-card li,.plan-card .button { font-size: 14px; }
  .footer-top { gap: 30px; }
}
@media (max-width: 950px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
  .plan-overview { min-height: 0; }
  .plan-description { min-height: 0; }
  .plan-card h3 { font-size: 32px; }
  .plan-card li,.plan-card .button { font-size: 16px; }
  .food-banner { grid-template-columns: 1fr; }
  .food-banner-image { height: 600px; min-height: 0; max-width: 600px; width: 100%; margin: auto; }
  .ambica { gap: 35px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { min-height: 280px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-identity { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .footer-connect { margin-top: 0; }
}
@media (max-width: 700px) {
  :root { --gutter: 24px; --band: 52px; }
  .section { padding: var(--band) var(--gutter); }
  .header-inner { height: 92px; }
  .header-actions { gap: 16px; }
  .header-actions .button { font-size: 12px; padding: 10px 15px; min-height: 38px; }
  .site-header .brand { height: 82px; }
  .site-header .brand-logo { height: 104px; width: 433.333px; }
  .eyebrow { font-size: 13px; padding: 8px 14px; gap: 8px; margin-bottom: 18px; }
  .section h2,.section-heading h2,.centered-heading h2,.food-banner-copy h2,.faq-intro h2,.ambica-copy h2,.contact-copy h2 { font-size: 42px; line-height: 1.1; }
  .centered-heading { margin-bottom: 35px; }
  .button { min-height: 54px; padding: 16px 22px; font-size: 15px; }
  .proof-band { padding: 25px var(--gutter); gap: 12px; }
  .proof-stat strong { font-size: 36px; }
  .proof-stat > span { font-size: 11px; }
  .approach { padding-top: var(--band); padding-bottom: var(--band); }
  .approach-inner > p { font-size: 16px; line-height: 1.5; }
  .approach-values { gap: 25px; }
  .approach-values > div { font-size: 12px; }
  .approach .text-link { font-size: 12px; }
  .section-heading > p,.section-heading-aside > p { font-size: 14px; }
  .section-heading { margin-bottom: 35px; }
  .transformation-info h3 { font-size: 21px; }
  .transformation-info p { font-size: 11px; }
  .drag-hint { font-size: 12px; }
  .gallery-footer > p { font-size: 11px; }
  .gallery-footer > p > span { font-size: 10px; }
  .ambica-copy > p { font-size: 16px; }
  .ambica-copy blockquote { font-size: 28px; }
  .ambica-copy .button { font-size: 14px; }
  .photo-credit { font-size: 9px; }
  .process-step { padding: 95px 25px 30px; }
  .process-step h3 { font-size: 32px; }
  .process-step p { padding: 0; }
  .motivation-sticky { top: 92px; height: calc(100svh - 92px); }
  .motivation-copy > .eyebrow { font-size: 12px; }
  .motivation-description p { font-size: 16px; }
  .motivation-description { min-height: 120px; max-width: 310px; }
  .plan-tabs { width: 100%; margin-top: 0; margin-bottom: 30px; }
  .plan-tabs button { padding: 12px 7px; font-size: 10px; }
  .plan-grid { gap: 24px; }
  .plan-overview,.plan-details { padding: 25px; }
  .plan-price { font-size: 54px; }
  .plan-price small { font-size: 14px; }
  .plan-help { font-size: 13px; }
  .voices { padding: var(--band) 0; }
  .testimonials-window { padding: 65px 35px 80px; scroll-snap-type: x mandatory; scroll-padding-left: 35px; }
  .testimonial-fan { gap: 42px; padding-right: 0; }
  .testimonial-card { flex-basis: min(76vw,340px); width: min(76vw,340px); height: 430px; }
  .voices .quote-card { padding: 25px; }
  .voices .quote-card blockquote { font-size: 15px; }
  .voices .quote-author > span { font-size: 23px; }
  .voices .celebrity-name { left: 25px; right: 20px; font-size: 24px; }
  .testimonials-controls { margin-top: 0; gap: 15px; }
  .testimonials-controls p { font-size: 12px; max-width: 180px; }
  .testimonials-controls .circle-button { width: 38px; height: 38px; }
  .community-stats { margin: 40px 15px 0; }
  .community-stats > div { padding: 0 10px; }
  .community-stats strong { font-size: 40px; }
  .community-stats strong span { font-size: 24px; }
  .community-stats > div > span { font-size: 12px; line-height: 1.4; }
  .food-banner { gap: 45px; }
  .food-banner-copy .button { padding: 18px 30px; }
  .food-banner-copy > p { font-size: 16px; margin: 25px 0; }
  .lifestyle-list { margin-top: 45px; }
  .lifestyle-list h3 { font-size: 24px; }
  .lifestyle-list ul { font-size: 14px; column-gap: 25px; row-gap: 12px; }
  .food-banner-image { height: 470px; }
  .faq { grid-template-columns: 1fr; gap: 40px; }
  .faq-intro { gap: 35px; }
  .faq-list summary { font-size: 18px; padding: 24px 0; }
  .faq-list details > p { font-size: 16px; }
  .contact { gap: 45px; }
  .contact-copy .eyebrow { font-size: 12px; }
  .contact-phone { font-size: 28px; }
  .contact-form label { font-size: 14px; }
  .footer { padding: var(--band) var(--gutter) 92px; }
  .footer-top { gap: 40px 25px; grid-template-columns: 1fr; }
  .footer-identity { grid-column: auto; gap: 15px; }
  .footer-brand { width: 110px; height: 95px; }
  .footer-brand .brand-logo { height: 110px; width: 458.333px; }
  .footer-connect { padding-top: 5px; }
  .footer-connect > p { font-size: 14px; }
  .footer .social-links { flex-direction: row; gap: 12px; font-size: 14px; }
  .footer h3 { margin-bottom: 22px; }
  .footer-top nav { font-size: 16px; gap: 18px 25px; }
  .footer-contact > a,.footer-contact p { font-size: 16px; }
  .footer-bottom { font-size: 12px; margin-top: 45px; gap: 22px; }
}

/* Page hero: a rounded colour panel with the title centred inside, as on the
   reference site's secondary pages. */
.page-intro.section { padding: 96px var(--gutter) 0; }
.page-intro-panel { background: var(--green); border-radius: 6px; padding: 70px 40px 100px; text-align: center; }
.page-intro-panel.is-plain { background: none; border-radius: 0; padding: 0 0 26px; }
.page-intro-panel.is-plain h1, .page-intro-panel.is-plain > p { color: var(--green); }
.page-intro h1 { font-family: var(--serif); font-size: clamp(48px, 6.6vw, 92px); line-height: 1.02; font-weight: 500; color: var(--lime); margin: 0; letter-spacing: normal; }
.page-intro h1 em { font-style: italic; }
.page-intro > .page-intro-panel > p { max-width: 720px; margin: 10px auto 0; font-size: 17px; line-height: 1.55; color: var(--lime); opacity: .9; }
.page-intro .button { margin-top: 30px; }
.page-intro .eyebrow { margin-bottom: 20px; background: #ffffff8c; }
@media (max-width: 950px) { .page-intro-panel { padding: 56px 28px 74px; } }
@media (max-width: 700px) {
  .page-intro-panel { padding: 44px 18px 56px; }
  .page-intro > .page-intro-panel > p { font-size: 15px; margin-top: 14px; }
}

/* Contact form status line. */
.contact-status { min-height: 20px; margin: 14px 0 0; font-size: 14px; line-height: 1.45; }
.contact-status[data-tone="error"] { color: #a6301f; }
.contact-status[data-tone="ok"] { color: var(--green); font-weight: 600; }
.contact-form label small { font-weight: 400; opacity: .65; }
.contact-phone { text-decoration: none; color: inherit; }
.contact-note a { color: inherit; font-weight: 600; }

/* Checkout feedback under a plan card. */
.plan-status { min-height: 18px; margin: 10px 0 0; font-size: 13px; line-height: 1.45; text-align: center; }
.plan-status[data-tone="error"] { color: #a6301f; }
.plan-status[data-tone="ok"] { color: var(--green); font-weight: 600; }
.plan-card button.button[disabled] { opacity: .6; cursor: default; }

/* Policy pages. */
.legal.section { padding-top: 70px; padding-bottom: 110px; }
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body h2 { font-family: var(--serif); font-size: 26px; line-height: 1.2; font-weight: 500; color: var(--green); margin: 44px 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 12px; }
@media (max-width: 700px) {
  .legal.section { padding-top: 48px; padding-bottom: 72px; }
  .legal-body h2 { font-size: 22px; margin-top: 34px; }
  .legal-body p { font-size: 15px; }
}

/* The FAQ block carries a "Contact us" card, which is redundant on the contact page. */
[data-page="contact"] .faq-contact-card { display: none; }
[data-page="contact"] .faq-intro { align-content: start; }

/* Contact page, following the reference: copy column left, filled-box form right,
   centred FAQ below. */
[data-page="contact"] .contact.section { background: var(--paper); grid-template-columns: 0.8fr 1.2fr; gap: 90px; align-items: start; padding-top: 30px; padding-bottom: 100px; }
[data-page="contact"] .contact-lede { font-family: var(--sans); font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--muted); margin: 0 0 34px; max-width: 340px; }
[data-page="contact"] .contact-copy h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--green); margin: 0 0 6px; }
[data-page="contact"] .contact-copy > a { display: block; font-size: 16px; color: var(--green); text-decoration: underline; text-underline-offset: 3px; margin-bottom: 26px; }
[data-page="contact"] .contact-copy > a.button { display: inline-flex; text-decoration: none; margin-top: 6px; color: var(--cream); }

[data-page="contact"] .contact-form { display: block; padding: 0; }
[data-page="contact"] .contact-form label { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--green); margin: 0 0 8px; }
[data-page="contact"] .contact-form label span { color: var(--green); }
[data-page="contact"] .contact-form input,
[data-page="contact"] .contact-form textarea {
  width: 100%; background: var(--cream); border: 1px solid #204a2d26; border-radius: 8px;
  padding: 15px 16px; font: inherit; font-size: 16px; color: var(--green); margin-bottom: 22px;
  transition: border-color .2s, box-shadow .2s;
}
[data-page="contact"] .contact-form textarea { resize: vertical; min-height: 120px; }
[data-page="contact"] .contact-form input:focus,
[data-page="contact"] .contact-form textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px #034c291f; }
[data-page="contact"] .contact-form input::placeholder,
[data-page="contact"] .contact-form textarea::placeholder { color: #204a2d99; font-size: 15px; }
[data-page="contact"] .contact-form .button { width: auto; justify-content: center; margin-top: 2px; padding: 16px 34px; }

/* FAQ underneath: centred heading with a single full-width list, as on the reference. */
[data-page="contact"] .faq.section { display: block; padding-top: 20px; }
[data-page="contact"] .faq-intro { display: block; text-align: center; margin-bottom: 40px; }
[data-page="contact"] .faq-intro h2 { text-align: center; }
[data-page="contact"] .faq-list { max-width: 900px; margin: 0 auto; }

@media (max-width: 950px) {
  [data-page="contact"] .contact.section { grid-template-columns: 1fr; gap: 44px; }
  [data-page="contact"] .contact-lede { max-width: none; }
}

/* ---- Our story page, following the reference layout ---- */
.story-hero.section { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; align-items: center; padding-top: 60px; padding-bottom: 100px; }
.story-hero h1 { font-family: var(--serif); font-size: clamp(40px, 4.6vw, 62px); line-height: 1.08; font-weight: 500; color: var(--green); margin: 0 0 30px; letter-spacing: normal; }
.story-hero h1 em { font-style: italic; }
.story-hero-copy p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; max-width: 470px; }
.story-signoff { font-family: var(--serif); font-size: 20px; color: var(--green); margin-top: 30px !important; }
.story-signoff small { display: block; font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 6px; }
.story-hero-photo { background: var(--sage); border-radius: 500px 500px 0 0; overflow: hidden; aspect-ratio: .9; }
.story-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 15% center; }

.story-mission.section { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; background: var(--cream); padding-top: 96px; padding-bottom: 96px; }
.story-mission-photos { position: relative; padding-bottom: 40px; }
.story-photo-back { width: 72%; height: auto; aspect-ratio: 1; border-radius: 10px; display: block; object-fit: cover; }
.story-photo-front { position: absolute; right: 0; bottom: 0; width: 46%; height: auto; aspect-ratio: .78; border-radius: 10px; object-fit: cover; background: var(--sage); box-shadow: 0 14px 34px #204a2d24; }
.story-mission-copy h2 { font-family: var(--serif); font-size: clamp(26px, 2.5vw, 34px); line-height: 1.28; font-weight: 500; color: var(--green); margin: 0 0 30px; letter-spacing: normal; }

.story-path.section { padding-top: 96px; padding-bottom: 40px; text-align: center; }
.story-path h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 56px); line-height: 1.1; font-weight: 500; color: var(--green); margin: 0 0 44px; letter-spacing: normal; }
.story-path h2 em { font-style: italic; }
.story-path-figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; max-width: 1160px; margin-inline: auto; }
.story-path-figure img { width: 100%; height: clamp(320px, 46vw, 560px); object-fit: cover; display: block; }
.story-path-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 90px 8% 36px;
  background: linear-gradient(transparent, #023a1fd9 55%); color: #fff; font-family: var(--serif); font-size: clamp(16px, 1.5vw, 21px); line-height: 1.45; }

.story-journey.section { display: grid; grid-template-columns: 1fr 1.15fr; gap: 7%; align-items: start; background: var(--cream); padding-top: 96px; padding-bottom: 100px; }
.story-journey h2 { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 50px); line-height: 1.1; font-weight: 500; color: var(--green); margin: 0; letter-spacing: normal; position: sticky; top: 92px; }
.story-journey h2 em { font-style: italic; }
.story-journey-list { display: grid; gap: 20px; }
/* Cards stack: each sticks slightly lower than the last, so they pile up as you scroll. */
.story-journey-list article { position: sticky; box-shadow: 0 -8px 26px #204a2d14; }
.story-journey-list article:nth-child(1) { top: 96px; }
.story-journey-list article:nth-child(2) { top: 122px; }
.story-journey-list article:nth-child(3) { top: 148px; }
.story-journey-list article:nth-child(4) { top: 174px; }
.story-journey-list article { background: var(--paper); border: 1px solid #204a2d1f; border-radius: 12px; padding: 30px 34px; }
.story-journey-list h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--green); margin: 0 0 14px; }
.story-journey-list p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

@media (max-width: 950px) {
  .story-hero.section, .story-mission.section, .story-journey.section { grid-template-columns: 1fr; gap: 44px; }
  .story-journey h2 { position: static; }
  .story-hero-photo { max-width: 480px; }
}
@media (max-width: 700px) {
  .story-hero.section { padding-top: 34px; padding-bottom: 64px; }
  .story-mission.section, .story-journey.section { padding-top: 64px; padding-bottom: 64px; }
  .story-path.section { padding-top: 64px; }
  .story-path-figure figcaption { padding: 60px 24px 24px; }
  .story-journey-list article { padding: 24px 22px; }
}

/* ---- How it works: alternating steps with arch-topped photos ---- */
.steps.section { padding-top: 40px; padding-bottom: 90px; display: grid; gap: clamp(64px, 8vw, 120px); }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; }
.step:nth-child(even) .step-copy { order: 2; }
.step-badge { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--lime); color: var(--green); font: 500 18px/1 var(--serif); margin-bottom: 26px; }
.step-copy h2 { font-family: var(--serif); font-size: clamp(30px, 3vw, 42px); line-height: 1.12; font-weight: 500; color: var(--green); margin: 0 0 16px; letter-spacing: normal; }
.step-copy p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 26px; max-width: 460px; }
.step-photo { background: var(--sage); border-radius: 500px 500px 12px 12px; overflow: hidden; aspect-ratio: .92; }
.step-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Footer: brand, pages, call to order, social icons ---- */
.footer-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 60px; }
.footer-tagline { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 22px 0 26px; max-width: 280px; }
.footer-cta { display: inline-flex; }
.footer-pages nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.footer-pages nav a, .footer-contact > a { color: var(--green); text-decoration: none; font-size: 16px; }
.footer-pages nav a:hover, .footer-contact > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-contact p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 6px 0 0; }
.footer .social-links { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 18px 0 0; }
/* Rounded squares rather than circles, and the mark in the brand pink. */
.footer .social-links a { display: grid; place-items: center; place-content: center; width: 44px; height: 44px; border-radius: 13px;
  background: var(--green); color: var(--lime); transition: background .25s, color .25s; }
.footer .social-links a:hover { background: var(--lime); color: var(--green); }
.footer .social-links .icon { width: 23px; height: 23px; }

@media (max-width: 950px) {
  .step { grid-template-columns: 1fr; gap: 32px; }
  .step:nth-child(even) .step-copy { order: 0; }
  .step-photo { max-width: 460px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-pages nav { gap: 12px 20px; }
  .steps.section { padding-bottom: 60px; }
}

/* Mission photos: side by side, the second dropped lower — as on the reference. */
.story-mission-photos { position: static; display: flex; align-items: flex-start; gap: 26px; padding-bottom: 0; }
.story-photo-back { position: static; width: 56%; }
.story-photo-front { position: static; width: 38%; margin-top: 64px; box-shadow: none; }

/* Path slider with a segmented progress bar. */
.story-path-slider { position: relative; border-radius: 14px; overflow: hidden; max-width: 1160px; margin-inline: auto; }
.story-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.story-slide:first-child { position: relative; }
.story-slide.is-current { opacity: 1; pointer-events: auto; }
.story-slide img { width: 100%; height: clamp(270px, 36vw, 440px); object-fit: cover; display: block; }
.story-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 96px 8% 58px;
  background: linear-gradient(transparent, #023a1fe0 62%); color: #fff; font-family: var(--serif);
  font-size: clamp(16px, 1.45vw, 20px); line-height: 1.5; text-align: center; }
.path-progress { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.path-progress-step { width: 46px; height: 4px; padding: 0; border: 0; border-radius: 4px; cursor: pointer;
  background: #ffffff59; overflow: hidden; transition: width .3s; }
.path-progress-step.is-current { width: 76px; }
/* The fill runs left to right over the time the slide is up, so the bar shows
   how long is left rather than only which slide is showing. */
.path-progress-fill { display: block; width: 100%; height: 100%; border-radius: inherit;
  background: var(--lime); transform: scaleX(0); transform-origin: left center; }
.path-progress-step.is-done .path-progress-fill { transform: scaleX(1); }
@media (max-width: 700px) {
  .story-mission-photos { gap: 14px; }
  .story-photo-front { margin-top: 40px; }
  .story-slide figcaption { padding: 80px 22px 44px; }
  .path-progress-step { width: 30px; }
  .path-progress-step.is-current { width: 52px; }
}

/* ---- Not found ---- */
.notfound.section { background: var(--cream); display: grid; place-items: center;
  min-height: clamp(420px, 54vh, 560px); text-align: center; }
.notfound-inner { max-width: 620px; }
.notfound .eyebrow { display: inline-block; font-family: var(--serif); font-size: 44px;
  letter-spacing: .08em; color: var(--pink-ink); background: none; padding: 0; margin-bottom: 8px; }
.notfound h1 { font-family: var(--serif); font-size: clamp(34px, 5vw, 56px); line-height: 1.1;
  font-weight: 500; color: var(--green); margin: 0 0 16px; letter-spacing: normal; }
.notfound > div > p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 auto 30px; max-width: 460px; }
.notfound-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; }
.notfound-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); margin-bottom: 4px; }
.notfound-more a { color: var(--green); font-size: 15px; text-decoration: none; }
.notfound-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.notfound-help { font-size: 14px; color: var(--muted); margin: 20px auto 0; max-width: 380px; }
.notfound-help a { color: var(--green); }
@media (max-width: 700px) {
  .notfound.section { min-height: 0; padding-block: 72px; }
  .notfound-links { flex-direction: column; gap: 16px; }
  .notfound-links .button { width: 100%; max-width: 320px; justify-content: center; }
}

/* ---- Recipes: listing grid and detail pages ---- */
.recipes.section { padding-top: 20px; padding-bottom: 100px; }
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.recipe-card { display: block; background: var(--cream); border-radius: 12px; padding: 14px 14px 26px; text-decoration: none; transition: background .25s; }
.recipe-card:hover { background: #fdeaf0; }
.recipe-card-photo { border-radius: 8px; overflow: hidden; margin-bottom: 18px; }
.recipe-card-photo img { width: 100%; height: 260px; object-fit: cover; display: block; }
.recipe-chip { display: inline-block; background: var(--paper); color: var(--green); border-radius: 6px; padding: 6px 12px; font-size: 14px; font-weight: 600; margin: 0 0 14px 8px; }
.recipe-card h2, .recipe-card h3 { font-family: var(--serif); font-size: 23px; line-height: 1.25; font-weight: 500; color: var(--green); margin: 0 8px; letter-spacing: normal; }

.recipe.section { padding-top: 70px; padding-bottom: 40px; }
.recipe-head { max-width: 800px; margin: 0 auto 44px; text-align: center; }
.recipe-meta { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 18px; font-size: 15px; color: var(--muted); }
.recipe-meta .recipe-chip { background: var(--cream); margin: 0; }
.recipe h1 { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 60px); line-height: 1.08; font-weight: 500; color: var(--green); margin: 0 0 20px; letter-spacing: normal; }
.recipe-summary { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; }
/* The photos are portrait phone shots, so the hero sits beside the title
   rather than above it — that uses the tall shape instead of fighting it. */
.recipe-top { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; margin-bottom: 64px; }
.recipe-hero img { width: 100%; height: auto; max-height: 620px; object-fit: cover; border-radius: 14px; display: block; background: var(--cream); }
.recipe-head { max-width: none; margin: 0; text-align: left; }
.recipe-meta { justify-content: flex-start; }
.recipe-quick { display: flex; gap: 22px; margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.recipe-quick span { position: relative; }
.recipe-quick span + span::before { content: '·'; position: absolute; left: -13px; }
.recipe-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 70px; align-items: start; }
.recipe-method h2 { font-family: var(--serif); font-size: clamp(28px, 2.8vw, 38px); font-weight: 500; color: var(--green); margin: 0 0 20px; letter-spacing: normal; }
.recipe-method h2 + p { margin-top: 0; }
.recipe-method p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; }
.recipe-method h2:not(:first-child) { margin-top: 40px; }
.recipe-facts { background: var(--cream); border-radius: 14px; padding: 34px; position: sticky; top: 30px; }
.recipe-facts h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; color: var(--green); margin: 0 0 16px; letter-spacing: normal; }
.recipe-facts h2:not(:first-child) { margin-top: 30px; }
.recipe-facts ul { margin: 0; padding-left: 20px; }
.recipe-facts li { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 6px; }
.recipe-facts dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.recipe-facts dl > div { background: var(--paper); border-radius: 8px; padding: 12px 14px; }
.recipe-facts dt { font-size: 13px; color: var(--muted); }
.recipe-facts dd { margin: 4px 0 0; font-family: var(--serif); font-size: 19px; color: var(--green); }
.recipe-note { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 20px 0 22px; }
.recipe-facts .button { width: 100%; }
.recipe-more.section { padding-top: 40px; padding-bottom: 100px; }
.recipe-more > h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 500; color: var(--green); margin: 0 0 34px; letter-spacing: normal; }

@media (max-width: 950px) {
  .recipe-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
  .recipe-body { grid-template-columns: 1fr; gap: 40px; }
  .recipe-facts { position: static; }
}
@media (max-width: 700px) {
  .recipe-grid { grid-template-columns: 1fr; }
  .recipe-card-photo img { height: 220px; }
  .recipes.section, .recipe-more.section { padding-bottom: 64px; }
  .recipe.section { padding-top: 40px; }
  .recipe-hero { margin-bottom: 40px; }
  .recipe-facts { padding: 24px; }
}

/* Brand marks are filled paths, not the stroked icon set. */
.footer .social-links .icon { fill: currentColor; stroke: none; width: 23px; height: 23px; }

/* Plans page: category sections instead of tabs. */
.plan-jump.section { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding-top: 54px; padding-bottom: 0; }
.plan-jump-label { font-size: 16px; color: var(--muted); margin-right: 4px; }
.plan-jump a { background: var(--green); color: var(--lime); border-radius: 8px; padding: 9px 16px; font-size: 16px; font-weight: 500; text-decoration: none; transition: background .2s; }
.plan-jump a:hover { background: #023a1f; }
.plans-stacked.section { padding-top: 56px; padding-bottom: 40px; display: grid; gap: clamp(56px, 6vw, 86px); }
.plan-group { scroll-margin-top: 40px; }
.plan-group-head { text-align: center; margin-bottom: 34px; }
.plan-group-head h2 { font-family: var(--serif); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 500; color: var(--green); margin: 0 0 10px; letter-spacing: normal; }
.plan-group-head p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 auto; max-width: 560px; }
.plans-stacked .plan-grid { min-height: 0; }
.plans-stacked .plan-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 940px; margin-inline: auto; }
@media (max-width: 950px) {
  .plans-stacked .plan-grid[data-count="4"] { grid-template-columns: 1fr; }
}

/* Keep the caption to a readable measure instead of running edge to edge. */
.story-slide figcaption { text-wrap: balance; }
.story-slide figcaption { padding-inline: max(8%, calc((100% - 720px) / 2)); }

/* Plain heroes sit on the page ground, not on the green panel, so their type
   stays green. Placed last to outrank the panel's pink rule. */
.page-intro > .page-intro-panel.is-plain > p { color: var(--green); opacity: .8; }
.page-intro > .page-intro-panel.is-plain h1 { color: var(--green); }

@media (max-width: 950px) {
  .recipe-top { grid-template-columns: 1fr; gap: 30px; }
  .recipe-hero img { max-height: 460px; object-position: center; }
}

/* Sticky header: full height at the top of the page, compact once scrolled.

   On a page with a hero the header is not sticky at all to begin with — it
   scrolls up and away with the hero, so nothing is pinned over the artwork.
   Once the hero has passed it becomes sticky and drops back in, compacted.
   Sticky keeps the element in its place in the flow, so turning it on changes
   no layout; the animation only covers the snap to the top of the window. */
.site-header { transition: box-shadow .25s; }
.site-header.nav-drops { position: static; }
.site-header.nav-drops.is-stuck {
  position: sticky; top: 0;
  animation: navDrop .38s cubic-bezier(.22, .68, 0, 1);
}
@keyframes navDrop { from { transform: translateY(-100%); } }
.site-header.is-stuck { box-shadow: 0 6px 24px rgba(3, 76, 41, .08); }
.site-header .header-inner, .site-header .brand, .site-header .brand-logo { transition: height .25s, width .25s; }
/* .brand is a crop window over a logo file that is mostly transparent padding,
   so shrinking the window alone slices the wreath — the image has to scale by
   the same factor. Desktop 92->58 is 0.630; tablet 82->52 is 0.634. */
.site-header.is-stuck .header-inner { height: 68px; }
.site-header.is-stuck .brand { height: 58px; }
.site-header.is-stuck .brand-logo { height: 73px; width: 304.5px; }
@media (max-width: 950px) {
  .site-header.is-stuck .header-inner { height: 62px; }
  .site-header.is-stuck .brand { height: 52px; }
  .site-header.is-stuck .brand-logo { height: 66px; width: 274.8px; }
}

/* ---- Header wordmark ----------------------------------------------------
   Archivo Black, self-hosted like the site's other faces. The client tried a
   rounder face and preferred this one; only the colour changed. */
@font-face {
  font-family: 'Archivo Black';
  src: url('../assets/fonts/archivo-black.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
.site-header .brand { display: flex; align-items: center; gap: 10px; width: auto; height: auto; overflow: visible; }
.site-header .brand-wreath { display: block; width: 76px; height: 76px; flex: none; }
.site-header .brand-wreath img { width: 100%; height: 100%; object-fit: contain; position: static; transform: none; }
.brand-word { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 23px; line-height: 1;
  text-transform: uppercase; white-space: nowrap; display: flex; align-items: baseline; gap: .42em; }
.brand-word-top { color: var(--green); letter-spacing: -.01em; }
.brand-word-bottom { color: var(--pink-ink); letter-spacing: -.01em; }
.site-header.is-stuck .brand { height: auto; }
.site-header.is-stuck .brand-wreath { width: 62px; height: 62px; }
.site-header.is-stuck .brand-word { font-size: 21px; }

@media (max-width: 950px) {
  /* The header is a three-column grid with the lockup in the middle, which
     only lands dead centre while both side columns can take an equal share.
     The mark made the lockup wide enough that the nav hit its own minimum and
     shoved the centre across, so the lockup and the nav each give a little. */
  .site-header .brand-wreath { width: 54px; height: 54px; }
  .brand-word { font-size: 19px; }
  .desktop-nav { gap: 14px; font-size: 12px; }
}
@media (max-width: 700px) {
  /* phone: the mark on the left, the wordmark centred on the header, the
     hamburger pinned right. Above this width a three-column grid centres the
     whole lockup; here only the wordmark leaves the flow, so it centres on the
     header rather than on the space beside the mark. */
  .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; }
  .site-header .brand { position: static; margin: 0 auto 0 0; transform: none; }
  .site-header .brand-wreath { width: 58px; height: 58px; }
  .header-actions { position: relative; margin-left: 0; }
  .brand-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 17px; gap: .34em; }
  .site-header.is-stuck .brand-wreath { width: 50px; height: 50px; }
  .site-header.is-stuck .brand-word { font-size: 16px; }
  /* logo left, hamburger right — Contact already lives in the mobile menu,
     and all three together do not fit a phone header */
  .header-actions .button { display: none; }
  .header-actions { gap: 10px; }
}