/* Editorial layout around the approved growth scene. */
:root { --site-ink: #153d30; --site-muted: #3e5949; --site-cream: #f2f3e7; --site-accent: #d7ef78; }
.story-header { background: var(--forest); }
.story-header nav { font-size: 16px; font-weight: 400; gap: 30px; }
.story-header nav a { transition: color .2s, background .2s; }
.story-header nav a:not(.header-contact):hover { color: var(--site-accent); }
.header-contact { color: var(--forest); background: var(--site-accent); border-color: transparent; padding-inline: 24px; }
.header-contact:hover { background: #e8f7b0; }
.brand > span { display: none; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .11em; }
.skip-story { font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.chapter-kicker, .chapter-kicker > span { font-size: 12px; }
.story-panel h1, .story-panel h2 { font-weight: 400; }
.story-panel > p:not(.chapter-kicker) { font-size: 17px; line-height: 1.7; }
.scroll-invitation, .chapter-note, .story-button { font-size: 15px; }
.scroll-invitation small { font-size: 13px; }
.scroll-circle { position: relative; width: 28px; height: 42px; border-radius: 16px; }
.scroll-circle::before { content: ''; width: 3px; height: 10px; border-radius: 2px; background: var(--lime); position: absolute; top: 8px; left: 11px; }
.chapter-nav a { font-size: 14px; }
.chapter-nav a > span { font-size: 11px; }
.plant-scene figcaption, .specimen-label { font-size: 11px; }

.back-to-top {
  position: fixed; z-index: 30; right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid #b9d770;
  color: var(--site-ink); background: var(--site-accent);
  box-shadow: 0 4px 18px rgb(7 17 12 / 20%); transition: background .2s;
}
.back-to-top:hover { background: #e8f7b0; }
.back-to-top:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--site-cream); }
/* Reserve room beside the story counter while the return control is visible. */
.experience-controls { padding-right: 28px; }

/* A light, full-width break from the dark plant story. */
.real-crop {
  position: relative; padding-block: 112px 76px; color: var(--site-ink);
  background: radial-gradient(ellipse at 95% 6%, #b3dfb0 0, transparent 46%),
    radial-gradient(ellipse at 0 75%, #d6ed9c 0, transparent 50%), var(--site-cream);
}
.real-crop::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 34px; background: var(--forest); clip-path: polygon(0 0,100% 0,0 100%); }
.real-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: end; }
.real-intro h2, .harvest-copy h2, .contact-intro h2 { font-size: clamp(44px, 4.8vw, 76px); font-weight: 500; letter-spacing: -.055em; line-height: 1.03; margin-top: 22px; }
.real-intro h2 em { color: #367143; }
.real-intro > p { font-size: 18px; line-height: 1.7; color: var(--site-muted); max-width: 430px; padding-bottom: 5px; }
.gallery-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block: 36px 22px; }
.gallery-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--site-muted); }
.gallery-heading > span:first-child { display: flex; align-items: center; gap: 14px; color: var(--site-ink); }
.real-gallery.gallery-track {
  --slide-width: calc((100% - 48px) / 3.15);
  display: flex; gap: 24px; margin: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #62875b transparent;
  padding-block: 4px 16px; position: relative;
}
.real-gallery.gallery-track > figure { flex: 0 0 var(--slide-width); min-width: 0; margin: 0; scroll-snap-align: start; }
.gallery-track a { display: block; position: relative; overflow: hidden; border-radius: 12px; background: #c0cfb6; }
.real-gallery.gallery-track > figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.photo-expand { position: absolute; right: 14px; bottom: 14px; border-radius: 24px; padding: 7px 15px; background: rgb(7 26 17 / 86%); color: #fff; font-size: 13px; opacity: 0; translate: 0 5px; transition: opacity .2s, translate .2s; }
.gallery-track a:hover .photo-expand, .gallery-track a:focus-visible .photo-expand { opacity: 1; translate: 0 0; }
.real-gallery.gallery-track figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding-top: 16px; }
.real-gallery.gallery-track figcaption > span { color: var(--site-ink); font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.gallery-track figcaption small { color: var(--site-muted); font-size: 12px; letter-spacing: .045em; }
.real-crop :focus-visible, .contact-section :focus-visible { outline-color: #17654b; }
.gallery-track a:focus-visible { outline-offset: -4px; outline-width: 3px; }
.carousel-controls { display: flex; align-items: center; gap: 26px; }
.carousel-status { white-space: nowrap; font-size: 16px; font-variant-numeric: tabular-nums; }
.carousel-status > span:first-child { font-weight: 600; }
.carousel-status > span + span { color: var(--site-muted); }
.carousel-progress { height: 2px; width: 100px; background: #bdcdb2; overflow: hidden; }
.carousel-progress > span { display: block; width: var(--carousel-progress, 14.285%); height: 100%; background: #286845; transition: width .2s; }
.carousel-buttons { display: flex; gap: 8px; }
.carousel-buttons button { min-height: 44px; border: 1px solid #6a8b64; border-radius: 30px; padding: 8px 22px; font-size: 15px; color: var(--site-ink); background: transparent; cursor: pointer; }
.carousel-buttons button:last-child { background: var(--site-ink); color: #fff; border-color: var(--site-ink); }
.carousel-buttons button:disabled { opacity: .45; cursor: default; }
.crop-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 52px; padding-top: 30px; border-top: 1px solid #b4c5a7; }
.crop-values article { position: relative; padding-left: 34px; }
.value-number { position: absolute; top: 5px; left: 0; font-size: 12px; color: var(--site-muted); }
.crop-values h3 { margin: 0 0 7px; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; font-weight: 500; }
.crop-values p { font-size: 16px; line-height: 1.6; color: var(--site-muted); max-width: 310px; }

/* A deeper teal chapter with an asymmetric colour cut. */
.harvest-section {
  position: relative; padding-block: 110px; color: #eff4e7;
  background: radial-gradient(ellipse at 8% 100%, #2b6344 0, transparent 60%), linear-gradient(120deg,#103d33,#0b2928 80%);
}
.harvest-section::before { content: ''; position: absolute; top: 0; right: 0; width: 38%; height: 32px; background: var(--site-cream); clip-path: polygon(0 0,100% 0,100% 100%); }
.harvest-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }
.harvest-photo { margin: 0; position: relative; }
.harvest-photo img { width: 100%; border-radius: 20px 100px 20px 20px; }
.harvest-photo figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 16px; font-size: 16px; color: #e8efda; }
.harvest-copy .eyebrow { color: #bfdcae; }
.harvest-copy h2 { font-size: clamp(40px,4vw,62px); }
.harvest-copy h2 em { color: var(--site-accent); }
.harvest-copy > p:not(.eyebrow) { font-size: 18px; color: #c3d8ca; line-height: 1.65; margin-top: 22px; max-width: 530px; }
.harvest-faq { margin-top: 28px; border-top: 1px solid #4a7160; }
.harvest-faq details { border-bottom: 1px solid #4a7160; }
.harvest-faq summary { display: flex; gap: 20px; justify-content: space-between; align-items: center; list-style: none; padding: 15px 0; font-size: 17px; font-weight: 400; cursor: pointer; }
.harvest-faq summary::-webkit-details-marker { display: none; }
.harvest-faq summary > span { font-size: 24px; font-weight: 300; flex-shrink: 0; transition: transform .2s; }
.harvest-faq details[open] summary > span { transform: rotate(45deg); }
.harvest-faq p { font-size: 16px; line-height: 1.6; color: #c3d8ca; padding: 0 25px 17px 0; }
.harvest-copy .story-button { background: var(--site-accent); font-size: 16px; font-weight: 500; padding-inline: 26px; margin-top: 26px; }

/* The optional panorama stays separate from the real-photo carousel. */
.panorama-invitation { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: 26px; margin-top: 30px; padding: 28px 32px; border-radius: 18px; color: #f2f3e7; background: linear-gradient(115deg,#12372c,#24533b); }
.panorama-badge { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #93ae88; border-radius: 50%; color: #d7ef78; font-size: 25px; letter-spacing: -.04em; }
.panorama-invitation .eyebrow { color: #d7ef78; margin: 0; font-size: 12px; }
.panorama-invitation h3 { margin: 6px 0; font-size: clamp(25px,2.5vw,34px); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.panorama-invitation p:not(.eyebrow) { color: #e1eadb; font-size: 16px; line-height: 1.5; }
.panorama-invitation .story-button { margin: 0; white-space: nowrap; font-size: 16px; background: #d7ef78; color: #102c21; }
.real-crop .panorama-invitation :focus-visible { outline-color: #f2f3e7; }
@media (max-width:1000px) {
  .panorama-invitation { grid-template-columns: 60px minmax(0,1fr); padding: 26px; gap: 18px; }
  .panorama-badge { width: 60px; height: 60px; font-size: 22px; }
  .panorama-invitation .story-button { grid-column: 2; justify-self: start; }
}
@media (max-width:600px) {
  .back-to-top.is-over-story { bottom: max(112px, calc(92px + env(safe-area-inset-bottom))); }
  .panorama-invitation { grid-template-columns: minmax(0,1fr); padding: 24px; gap: 16px; }
  .panorama-badge { width: auto; height: auto; border: 0; justify-self: start; font-size: 22px; }
  .panorama-invitation .story-button { grid-column: 1; white-space: normal; width: 100%; padding-inline: 16px; }
}

/* Contact lives beside the map, not in oversized promotional cards. */
.contact-icon-library { position: absolute; overflow: hidden; pointer-events: none; }
.contact-icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.contact-cta, .story-footer a { gap: 10px; }
.contact-section {
  padding-block: 100px; color: var(--site-ink);
  background: radial-gradient(ellipse at 0 100%,#dce6b4,transparent 60%),#f1f1e5;
}
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.contact-intro { display: block; }
.contact-intro h2 { font-size: clamp(40px,3.65vw,58px); }
.contact-intro h2 em { color: #3c754d; }
.contact-intro > p { margin-top: 24px; font-size: 18px; color: var(--site-muted); max-width: 470px; line-height: 1.65; }
.contact-channels { display: flex; flex-direction: column; margin-top: 30px; border-top: 1px solid #b9c8ac; }
.contact-card { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; column-gap: 14px; padding: 18px 0; border-bottom: 1px solid #b9c8ac; transition: color .2s; }
.contact-card > .contact-icon { grid-column: 1; grid-row: 1 / 3; place-self: center; width: 26px; height: 26px; }
.contact-whatsapp > .contact-icon { color: #12823f; }
.contact-instagram > .contact-icon { color: #b22976; }
.contact-email > .contact-icon { width: 32px; height: 32px; stroke-width: 1.8; }
.contact-label { grid-column: 2; font-size: 13px; color: var(--site-muted); }
.contact-value { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: clamp(18px,1.55vw,24px); font-weight: 500; letter-spacing: -.035em; }
.contact-action { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: 8px 15px; border: 1px solid #799674; border-radius: 24px; font-size: 14px; line-height: 1.5; }
.contact-whatsapp .contact-action { background: #214e38; color: #fff; border-color: #214e38; }
.location-map { min-width: 0; overflow: hidden; border-radius: 18px; background: #fffdf2; border: 1px solid #d6dfc9; box-shadow: 0 16px 44px rgb(40 71 43 / 7%); scroll-margin-top: calc(var(--header-height) + 20px); }
.map-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px; }
.map-heading h3 { font-size: 27px; line-height: 1.2; letter-spacing: -.04em; font-weight: 500; margin: 8px 0 12px; }
.map-heading p:not(.eyebrow) { font-size: 15px; color: var(--site-muted); line-height: 1.6; }
.map-directions { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 1px solid #50794b; font-size: 15px; }
.location-map iframe { display: block; width: 100%; height: 300px; border: 0; background: #dfe8d4; color-scheme: light; }
.map-note { padding: 17px 28px; color: var(--site-muted); font-size: 13px; line-height: 1.6; }

/* A branded closing panel with the original, scannable QR. */
.ending-section { position: relative; background: radial-gradient(ellipse at 95% 100%,#346948,transparent 70%),linear-gradient(120deg,#0b2721,#153d30); }
.ending-section::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 26px; background: #f1f1e5; clip-path: polygon(0 0,100% 0,100% 100%); }
.ending-section .story-ending { border: 0; margin-block: 0; padding-block: 85px 70px; }
.story-ending h2 { font-size: clamp(42px,4.5vw,66px); font-weight: 400; margin-block: 20px; }
.story-ending p:not(.eyebrow) { color: #d4e3d2; font-size: 17px; }
.ending-link { margin-top: 15px; font-size: 15px; }
.original-qr { padding: 22px; border: 1px solid #638065; border-radius: 18px; background: rgb(4 20 11 / 24%); }
.original-qr img { width: 156px; height: 156px; }
.original-qr > span { font-size: 11px; color: #d4e3d2; }
.story-footer { font-size: 14px; }

/* Full-resolution viewer. No decorative arrows. */
.photo-dialog { color-scheme: dark; color: var(--paper); background: #10291f; border: 1px solid #5d8067; border-radius: 18px; width: min(1040px,calc(100vw - 48px)); max-height: calc(100dvh - 40px); padding: 0; }
.photo-dialog::backdrop { background: rgb(2 10 6 / 88%); backdrop-filter: blur(8px); }
.gallery-shell { padding: 22px; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.gallery-toolbar h2 { font-size: 24px; font-weight: 400; letter-spacing: -.025em; }
.photo-dialog button { min-height: 44px; padding: 8px 17px; border: 1px solid #749879; border-radius: 24px; background: transparent; cursor: pointer; font-size: 15px; }
.gallery-toolbar button { display: flex; align-items: center; gap: 16px; }
.gallery-toolbar button span { font-size: 24px; line-height: 1; }
.gallery-display { position: relative; background: #07130d; border-radius: 8px; }
.gallery-full { width: 100%; height: min(65dvh,700px); object-fit: contain; }
.gallery-status:empty { display: none; }
.gallery-status { padding: 14px; background: #163622; font-size: 14px; }
.photo-dialog[data-loading=true] .gallery-full { opacity: .3; }
.gallery-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; }
.gallery-description { display: flex; align-items: center; gap: 18px; }
.gallery-count { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #bad2b6; }
.gallery-caption { font-size: 17px; }
.gallery-buttons { display: flex; gap: 8px; }
.gallery-original { display: inline-flex; align-items: center; min-height: 44px; margin-top: 5px; font-size: 14px; color: #bad2b6; text-decoration: underline; text-underline-offset: 4px; }
@media (hover:hover) and (pointer:fine) {
  .gallery-track a:hover img { transform: scale(1.035); }
  .carousel-buttons button:not(:disabled):hover { background: #d4e3be; color: var(--site-ink); }
  .contact-card:hover { color: #315f38; }
  .contact-card:hover .contact-action { background: #d6e5c1; color: #153d30; }
  .photo-dialog button:hover { background: #31583b; }
}
@media (max-width:1100px) {
  .harvest-layout, .contact-layout { gap: 42px; }
  .real-intro { gap: 40px; }
  .contact-value { font-size: 20px; }
  .contact-action { padding: 7px 10px; font-size: 13px; }
  .harvest-photo figcaption { flex-direction: column; }
}
@media (max-width:1000px) {
  .real-gallery.gallery-track { --slide-width: calc((100% - 24px) / 2.15); }
  .contact-layout { grid-template-columns: 1fr; gap: 45px; }
  .contact-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
  .contact-channels { margin: 0; }
  .contact-card { grid-template-columns: 32px minmax(0,1fr); gap: 3px 12px; }
  .contact-action { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; }
  .location-map iframe { height: 340px; }
  .map-heading { flex-wrap: nowrap; }
  .map-directions { flex-shrink: 0; }
}
@media (max-width:900px) {
  .carousel-progress { display: none; }
  .gallery-meta { flex-wrap: wrap; }
  .story-header nav .extended-nav { display: none; }
  .real-intro > p { font-size: 17px; }
  .crop-values { gap: 24px; }
  .crop-values article { padding-left: 0; }
  .value-number { position: static; display: block; margin-bottom: 8px; }
  .crop-values h3 { font-size: 20px; }
  .harvest-layout { gap: 35px; }
  .harvest-copy > p:not(.eyebrow) { font-size: 16px; }
  .harvest-faq summary { font-size: 16px; }
}
@media (max-width:600px) {
  .story-header nav { font-size: 15px; }
  .header-contact { padding-inline: 17px; }
  .brand img { width: 162px; }
  .stage-top { gap: 8px; }
  .skip-story { font-size: 12px; white-space: nowrap; }
  .chapter-kicker, .chapter-kicker > span { font-size: 11px; }
  .story-panel > p:not(.chapter-kicker) { font-size: 15px; line-height: 1.6; }
  .scroll-invitation, .chapter-note, .story-panel .story-button { font-size: 14px; }
  .scroll-circle { width: 24px; height: 34px; }
  .scroll-circle::before { left: 9px; top: 6px; height: 8px; }
  .chapter-nav a { font-size: 13px; gap: 6px; }
  .chapter-nav a > span { font-size: 10px; }
  .plant-scene figcaption, .specimen-label { font-size: 9px; }
  .real-crop { padding-block: 72px 48px; }
  .real-crop::before { height: 20px; }
  .real-intro { grid-template-columns: 1fr; gap: 22px; }
  .real-intro h2, .contact-intro h2 { font-size: clamp(39px,11vw,58px); margin-top: 16px; }
  .real-intro > p { font-size: 17px; }
  .gallery-meta { margin-block: 28px 16px; gap: 16px; }
  .gallery-heading { font-size: 13px; gap: 10px; }
  .gallery-heading > span:first-child { gap: 9px; }
  .real-gallery.gallery-track { --slide-width: 86%; gap: 16px; }
  .real-gallery.gallery-track figcaption > span { font-size: 17px; }
  .photo-expand { opacity: 1; translate: none; font-size: 12px; padding: 5px 12px; }
  .carousel-controls { gap: 14px; width: 100%; }
  .carousel-progress { display: none; }
  .carousel-buttons { margin-left: auto; gap: 6px; }
  .carousel-buttons button { font-size: 14px; padding-inline: 15px; }
  .carousel-status { font-size: 14px; }
  .crop-values { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; padding-top: 28px; }
  .crop-values article { padding-left: 34px; }
  .value-number { position: absolute; }
  .crop-values h3 { font-size: 22px; }
  .harvest-section { padding-block: 70px 60px; }
  .harvest-layout { grid-template-columns: 1fr; gap: 40px; }
  .harvest-photo img { border-top-right-radius: 70px; }
  .harvest-photo figcaption { gap: 3px; }
  .harvest-copy h2 { font-size: clamp(38px,10.5vw,54px); margin-top: 16px; }
  .harvest-copy > p:not(.eyebrow), .harvest-faq p { font-size: 16px; }
  .contact-section { padding-block: 60px; }
  .contact-copy { display: block; }
  .contact-intro > p { font-size: 17px; margin-top: 22px; }
  .contact-channels { margin-top: 26px; }
  .contact-card { grid-template-columns: 32px minmax(0,1fr); gap: 2px 10px; padding-block: 18px; }
  .contact-value { font-size: 20px; }
  .contact-action { display: none; }
  .contact-label { font-size: 12px; }
  .map-heading { flex-wrap: wrap; padding: 24px; gap: 12px; }
  .map-heading h3 { font-size: 26px; }
  .map-heading p:not(.eyebrow) { font-size: 14px; }
  .location-map iframe { height: 300px; }
  .map-note { padding: 17px 24px; }
  .ending-section .story-ending { padding-block: 65px 45px; gap: 30px; }
  .story-ending h2 { font-size: 45px; }
  .story-ending p:not(.eyebrow) { font-size: 16px; }
  .original-qr { display: inline-flex; width: fit-content; padding: 18px; gap: 20px; }
  .original-qr img { width: 120px; height: 120px; }
  .original-qr > span { font-size: 11px; }
  .story-footer { flex-wrap: wrap; gap: 5px 20px; font-size: 13px; }
  .story-footer > span { width: 100%; }
  .photo-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
  .gallery-shell { padding: 12px; }
  .gallery-toolbar { gap: 10px; }
  .gallery-toolbar h2 { font-size: 18px; max-width: 180px; }
  .gallery-toolbar button { gap: 8px; }
  .gallery-full { height: 53dvh; }
  .gallery-bottom, .gallery-description { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gallery-description { gap: 3px; }
  .gallery-buttons { align-self: stretch; }
  .gallery-buttons button { flex: 1; }
  .gallery-caption { font-size: 16px; }
  .gallery-original { font-size: 13px; }
}
@media (max-width:600px) and (max-height:760px) {
  .story-panel > p:not(.chapter-kicker) { font-size: 14px; }
  .story-ready .growth-stage { grid-template-rows: 34px minmax(0,1fr) 78px; }
}
@media (max-width:360px) {
  .brand img { width: 140px; }
  .header-contact { padding-inline: 13px; }
  .skip-story { font-size: 11px; }
  .chapter-nav a { font-size: 12px; gap: 4px; }
  .chapter-nav a > span { font-size: 9px; }
  .contact-value { font-size: 18px; }
  .contact-action { font-size: 12px; padding-inline: 8px; }
  .carousel-buttons button { padding-inline: 12px; font-size: 13px; }
  .gallery-heading > span:first-child { font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .gallery-track img, .photo-expand, .carousel-progress > span { transition: none; }
}
@media print {
  .back-to-top { display: none; }
  .real-gallery.gallery-track { display: grid; grid-template-columns: repeat(2,1fr); overflow: visible; }
  .carousel-controls, .photo-expand { display: none; }
}