.cinema-hero.is-paused .chapter.is-active i {
  animation-play-state: paused;
}

.cinema-content {
  width: min(940px, calc(100vw - 10vw));
  max-width: 940px;
  padding: 0;
}

.cinema-content .cinema-kicker {
  display: inline-flex;
  position: relative;
  width: auto;
  margin-bottom: 17px;
  padding: 8px 13px;
  border: 1px solid rgba(230, 250, 255, .54);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(188, 230, 240, .025) 58%, rgba(104, 183, 207, .075));
  -webkit-backdrop-filter: blur(1.2px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(1.2px) saturate(1.5) brightness(1.04);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .11), inset 2px 2px 3px rgba(255, 255, 255, .30), inset -3px -4px 9px rgba(76, 157, 183, .09);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .82);
}

.cinema-content .cinema-copy h1 {
  font-size: clamp(3.2rem, 6vw, 6.4rem);
}

.cinema-content .cinema-overline,
.cinema-content .cinema-summary {
  width: fit-content;
  position: relative;
  border: 1px solid rgba(230, 250, 255, .52);
  background: linear-gradient(145deg, rgba(255, 255, 255, .115), rgba(188, 230, 240, .022) 60%, rgba(104, 183, 207, .07));
  -webkit-backdrop-filter: blur(1.2px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(1.2px) saturate(1.5) brightness(1.04);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .11), inset 2px 2px 3px rgba(255, 255, 255, .30), inset -3px -4px 9px rgba(76, 157, 183, .09);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .84), 0 0 1px rgba(0,0,0,.75);
}

.cinema-content .cinema-overline {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.cinema-content .cinema-summary {
  max-width: 570px;
  padding: 10px 14px;
  border-radius: 18px 18px 18px 7px;
}

.cinema-content .cinema-kicker:after,
.cinema-content .cinema-overline:after,
.cinema-content .cinema-summary:after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 2px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 18% 4%, rgba(255,255,255,.28), transparent 27%);
  box-shadow: inset 0 -1px 0 rgba(170, 226, 239, .20);
}

.cinema-controls {
  padding: 12px 14px;
  border: 1px solid rgba(232, 251, 255, .36);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(148,211,225,.035));
  -webkit-backdrop-filter: blur(1.5px) saturate(1.45);
  backdrop-filter: blur(1.5px) saturate(1.45);
  box-shadow: 0 8px 22px rgba(0,0,0,.10), inset 1px 1px 2px rgba(255,255,255,.26), inset -2px -3px 8px rgba(76,157,183,.08);
}

.brand-mark {
  width: 52px;
  height: 52px;
  padding: 2px;
  border: 1px solid rgba(244, 240, 230, 0.48);
  border-radius: 15px;
  background: rgba(244, 240, 230, 0.94);
  box-shadow: 0 9px 28px rgba(4, 18, 14, 0.22);
  object-fit: contain;
}

.brand strong {
  letter-spacing: -0.015em;
}

.footer-brand .brand-mark {
  background: #f4f0e6;
}

.bazar {
  background: linear-gradient(145deg, #f7f2e7 0%, #ece2ca 100%);
}

.bazar-intro {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1.14fr);
  column-gap: 8vw;
  align-items: center;
  margin-bottom: 62px;
}

.bazar-copy h2,
.bazar-copy > p:last-child {
  margin-bottom: 0;
}

.bazar-copy > p:last-child {
  color: #53635c;
  font-size: 1.04rem;
}

.bazar-photo {
  position: relative;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(34, 59, 48, .16);
}

.bazar-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(8, 29, 23, .78));
}

.bazar-photo img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

.bazar-photo figcaption {
  position: absolute;
  z-index: 2;
  left: 34px;
  right: 34px;
  bottom: 30px;
  padding: 19px 22px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 20px;
  background: rgba(12, 38, 31, .42);
  -webkit-backdrop-filter: blur(15px) saturate(1.2);
  backdrop-filter: blur(15px) saturate(1.2);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
  color: #fff;
}

.bazar-photo figcaption span {
  display: block;
  color: #efd58d;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.bazar-photo figcaption strong {
  display: block;
  max-width: 480px;
  font: 1.55rem/1.25 "Playfair Display", serif;
}

.bazar-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(23, 63, 44, .22);
  border-left: 1px solid rgba(23, 63, 44, .22);
}

.bazar-flow article {
  min-height: 260px;
  padding: 28px 24px;
  border-right: 1px solid rgba(23, 63, 44, .22);
  border-bottom: 1px solid rgba(23, 63, 44, .22);
  background: rgba(255, 255, 255, .28);
}

.bazar-flow span {
  display: block;
  color: var(--gold);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: 54px;
}

.bazar-flow h3 {
  font-family: "Playfair Display", serif;
  font-size: 1.45rem;
  margin-bottom: 12px;
}

.bazar-flow p {
  color: #5d6a64;
  font-size: .86rem;
  line-height: 1.6;
}

.bazar-quote {
  max-width: 900px;
  margin: 58px 0 0 auto;
  padding-left: 34px;
  border-left: 2px solid var(--gold);
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 3.1vw, 2.8rem);
  line-height: 1.25;
  color: var(--green);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 24px 0 14px;
}

.contact-whatsapp {
  display: inline-flex !important;
  align-items: center;
  gap: 26px;
  margin: 0 !important;
  padding: 14px 19px;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 4px;
  background: #f4f0e6;
  color: #173f2c;
  font-weight: 700;
  text-decoration: none !important;
}

.contact-phone {
  margin: 0 !important;
  border-bottom: 1px solid #6d8d80;
}

.back-top {
  font-size: .78rem;
  opacity: .8;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 24px 0 26px;
}

.contact-social span {
  width: 100%;
  color: #9fb7ad;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.contact-social a {
  margin: 0 !important;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  font-size: .8rem;
  text-decoration: none !important;
}

@media(max-width: 1080px) {
  .bazar-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bazar-flow article:last-child { grid-column: 1 / -1; min-height: auto; }
}

@media(max-width: 900px) {
  .bazar-intro { grid-template-columns: 1fr; gap: 42px; }
  .bazar-photo, .bazar-photo img { min-height: 430px; }
}

@media(max-width: 560px) {
  .brand-mark { width: 46px; height: 46px; }
  .cinema-content {
    width: 88vw;
    padding: 0;
  }
  .cinema-content .cinema-copy h1 { font-size: clamp(2.25rem, 10vw, 3.2rem); }
  .cinema-content .cinema-summary { margin-top: 14px; }
  .cinema-controls { padding: 9px 10px; border-radius: 15px; }
  .bazar-photo, .bazar-photo img { min-height: 340px; }
  .bazar-photo figcaption { left: 18px; right: 18px; bottom: 18px; padding: 16px 17px; border-radius: 17px; }
  .bazar-flow { grid-template-columns: 1fr; }
  .bazar-flow article, .bazar-flow article:last-child { grid-column: auto; min-height: auto; }
  .bazar-flow span { margin-bottom: 26px; }
}

.chapter:focus-visible,
.cinema-toggle:focus-visible,
.cinema-action:focus-visible {
  outline: 2px solid #f4f0e6;
  outline-offset: 5px;
}

/* Sistema de ações em vidro líquido: lente, refração e brilho de gota. */
:where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 24% 4%, rgba(255, 255, 255, .42), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .07)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.55) contrast(1.04);
  backdrop-filter: blur(14px) saturate(1.55) contrast(1.04);
  box-shadow:
    0 11px 30px rgba(3, 20, 16, .20),
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -1px 0 rgba(255, 255, 255, .10),
    inset 7px 8px 18px rgba(255, 255, 255, .05);
  transform: translateZ(0);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}

:where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i):before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 42%;
  height: 180%;
  left: -58%;
  top: -44%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transition: left .62s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

:where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i):hover {
  transform: translateY(-3px) scale(1.018);
  border-color: rgba(255, 255, 255, .62) !important;
  box-shadow:
    0 17px 38px rgba(3, 20, 16, .25),
    inset 0 1px 0 rgba(255, 255, 255, .68),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset -8px -9px 18px rgba(13, 52, 42, .10);
}

:where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i):hover:before {
  left: 116%;
}

:where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i):active {
  transform: translateY(0) scale(.985);
  box-shadow:
    0 6px 16px rgba(3, 20, 16, .18),
    inset 0 2px 5px rgba(3, 20, 16, .15),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.button.cream,
.contact-whatsapp {
  border-color: rgba(23, 63, 44, .24) !important;
  background:
    radial-gradient(ellipse at 24% 4%, rgba(255, 255, 255, .74), transparent 38%),
    linear-gradient(145deg, rgba(244, 240, 230, .88), rgba(216, 229, 220, .58)) !important;
  color: #173f2c;
  box-shadow:
    0 12px 32px rgba(23, 63, 44, .18),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 0 -1px 0 rgba(23, 63, 44, .11);
}

.button.primary {
  background:
    radial-gradient(ellipse at 24% 4%, rgba(255, 255, 255, .24), transparent 36%),
    linear-gradient(145deg, rgba(35, 91, 72, .90), rgba(14, 53, 43, .82)) !important;
}

.cinema-action i,
.cinema-toggle {
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.40), transparent 28%),
    rgba(8, 29, 24, .22) !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i),
  :where(.nav-cta, .button, .contact-whatsapp, .cinema-toggle, .cinema-action i):before {
    transition: none;
  }
}

/* Navegação e suporte da marca com a mesma água clara do hero. */
.site-header nav {
  position: relative;
  overflow: hidden;
  border-color: rgba(230, 250, 255, .52);
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.18), transparent 29%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(176,225,237,.02) 62%, rgba(93,174,199,.07));
  -webkit-backdrop-filter: blur(1.4px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(1.4px) saturate(1.5) brightness(1.04);
  box-shadow:
    0 10px 28px rgba(0,0,0,.11),
    inset 2px 2px 3px rgba(255,255,255,.26),
    inset -4px -5px 11px rgba(73,155,182,.08);
}

.site-header nav:before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 2px;
  border-radius: inherit;
  border-top: 1px solid rgba(255,255,255,.20);
  background: radial-gradient(ellipse at 10% 0%, rgba(255,255,255,.15), transparent 22%);
}

.site-header nav a {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 6px rgba(0,0,0,.82), 0 0 1px rgba(0,0,0,.75);
}

.site-header .nav-cta {
  border-color: rgba(235, 252, 255, .58) !important;
  background:
    radial-gradient(circle at 28% 15%, rgba(255,255,255,.24), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(132,205,222,.045)) !important;
  -webkit-backdrop-filter: blur(1.2px) saturate(1.55) brightness(1.05);
  backdrop-filter: blur(1.2px) saturate(1.55) brightness(1.05);
}

.site-header .brand-medallion {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(255, 255, 255, .50);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 11px 30px rgba(0, 0, 0, .25),
    0 0 0 1px rgba(255, 255, 255, .34),
    inset 0 0 0 1px rgba(15, 78, 91, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.site-header .brand-medallion .brand-mark {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
  transform: scale(1.22);
  transition: transform .25s ease;
}

.site-header .brand:hover .brand-medallion {
  transform: translateY(-1px) scale(1.025);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .29),
    0 0 0 1px rgba(255, 255, 255, .42),
    inset 0 0 0 1px rgba(15, 78, 91, .06);
}

.site-header .brand:hover .brand-medallion .brand-mark {
  transform: scale(1.27);
}

@media (max-width: 560px) {
  .site-header .brand-medallion {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
}

/* Banco de Alimentos — uma narrativa visual do excedente ao impacto. */
.food-system {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 18%, rgba(176, 138, 67, .13), transparent 30%),
    linear-gradient(145deg, #102f29 0%, #173f35 55%, #0d2830 100%);
  color: #fff;
}

.food-system:before {
  content: "";
  position: absolute;
  right: -190px;
  top: -210px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 50%;
  box-shadow: 0 0 0 82px rgba(255, 255, 255, .025), 0 0 0 164px rgba(255, 255, 255, .018);
  pointer-events: none;
}

.food-system__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr);
  gap: clamp(45px, 8vw, 120px);
  align-items: end;
  margin-bottom: 62px;
}

.food-system__head h2 {
  max-width: 850px;
  margin-bottom: 0;
  color: #fff;
}

.food-system__head > p {
  margin: 0 0 8px;
  color: rgba(238, 244, 239, .78);
  font-size: 1.03rem;
}

.food-system__hero {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 34px 95px rgba(0, 0, 0, .28);
}

.food-system__hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(4, 24, 19, .82));
  pointer-events: none;
}

.food-system__hero img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}

.food-system__hero:hover img { transform: scale(1.025); }

.food-system__hero figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 58px);
  right: clamp(24px, 4vw, 58px);
  bottom: clamp(24px, 4vw, 48px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
}

.food-system__hero figcaption span {
  color: #efd58d;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.food-system__hero figcaption strong {
  max-width: 650px;
  font: 600 clamp(1.55rem, 3vw, 2.7rem)/1.15 "Playfair Display", serif;
  text-align: right;
}

.food-cycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0 100px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  border-left: 1px solid rgba(255, 255, 255, .13);
}

.food-cycle article {
  position: relative;
  min-height: 300px;
  padding: 30px 28px;
  border-right: 1px solid rgba(255, 255, 255, .13);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .025);
  transition: background .3s ease, transform .3s ease;
}

.food-cycle article:hover {
  z-index: 1;
  background: rgba(255, 255, 255, .07);
  transform: translateY(-5px);
}

.food-cycle article > span {
  color: #d1b46f;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.food-cycle svg {
  display: block;
  width: 48px;
  height: 48px;
  margin: 34px 0 28px;
  fill: none;
  stroke: #d8c27e;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.food-cycle h3 {
  margin-bottom: 11px;
  font: 600 1.45rem/1.2 "Playfair Display", serif;
}

.food-cycle p {
  margin: 0;
  color: rgba(232, 240, 235, .67);
  font-size: .87rem;
  line-height: 1.65;
}

.eco-story {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  align-items: stretch;
  background: #f4f0e6;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .2);
}

.eco-story__image {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}

.eco-story__image:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(5, 28, 22, .55));
}

.eco-story__image img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  display: block;
}

.eco-story__image > span {
  position: absolute;
  z-index: 2;
  left: 34px;
  bottom: 32px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 18px;
  background: rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(5px) saturate(1.25);
  backdrop-filter: blur(5px) saturate(1.25);
  color: #fff;
}

.eco-story__image small,
.eco-story__image strong { display: block; }
.eco-story__image small { color: #f1d896; font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eco-story__image strong { margin-top: 4px; font: 600 1.5rem/1.1 "Playfair Display", serif; }

.eco-story__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 6vw, 84px);
}

.eco-story__copy h2 {
  margin-bottom: 28px;
  font-size: clamp(2.3rem, 4vw, 4.2rem);
}

.eco-story__copy > p:not(.eyebrow) { color: #596861; }

.eco-benefits,
.bazar-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.eco-benefits span,
.bazar-skills span {
  padding: 9px 13px;
  border: 1px solid rgba(23, 63, 44, .19);
  border-radius: 99px;
  background: rgba(255, 255, 255, .58);
  color: var(--green);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Bazar-Escola — prática, aprendizagem e reaproveitamento. */
.bazar-story {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  margin-top: 26px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(33, 59, 48, .1);
}

.bazar-story figure {
  min-height: 480px;
  margin: 0;
  overflow: hidden;
}

.bazar-story img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: block;
  object-fit: cover;
}

.bazar-story > div {
  align-self: center;
  padding: clamp(38px, 5vw, 70px);
}

.bazar-story h3 {
  margin: 0 0 23px;
  color: var(--green);
  font: 600 clamp(2rem, 3.1vw, 3.1rem)/1.08 "Playfair Display", serif;
}

.bazar-story > div > p:not(.eyebrow) { color: #5c6a63; }

.orar-ecosystem {
  display: grid;
  grid-template-columns: minmax(280px, .64fr) minmax(0, 1.36fr);
  gap: clamp(44px, 7vw, 110px);
  margin-top: 88px;
}

.orar-ecosystem__intro {
  align-self: start;
  position: sticky;
  top: 36px;
}

.orar-ecosystem__intro h3 {
  margin: 0 0 23px;
  color: var(--green);
  font: 600 clamp(2rem, 3.3vw, 3.45rem)/1.08 "Playfair Display", serif;
}

.orar-ecosystem__intro > p:last-child { color: #64716b; }

.orar-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.orar-ecosystem__grid article {
  min-height: 285px;
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}

.orar-ecosystem__grid article:last-child {
  grid-column: 1 / -1;
  min-height: 240px;
  background: linear-gradient(120deg, #f4f0e6, #fff);
}

.orar-ecosystem__grid article:hover {
  z-index: 1;
  transform: translateY(-6px);
  box-shadow: 0 22px 55px rgba(26, 54, 43, .1);
}

.orar-ecosystem__grid svg {
  width: 44px;
  height: 44px;
  margin-bottom: 34px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.orar-ecosystem__grid span {
  display: block;
  margin-bottom: 8px;
  color: #71857b;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.orar-ecosystem__grid h4 {
  margin: 0 0 11px;
  color: var(--green);
  font: 600 1.4rem/1.22 "Playfair Display", serif;
}

.orar-ecosystem__grid p { margin: 0; color: #68756f; font-size: .88rem; }

@media(max-width: 1050px) {
  .food-system__head { grid-template-columns: 1fr; gap: 22px; }
  .food-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-story, .bazar-story { grid-template-columns: 1fr; }
  .eco-story__image { min-height: 520px; }
  .orar-ecosystem { grid-template-columns: 1fr; }
  .orar-ecosystem__intro { position: static; max-width: 720px; }
}

@media(max-width: 680px) {
  .food-system__hero, .food-system__hero img { min-height: 500px; }
  .food-system__hero img { object-position: 58% center; }
  .food-system__hero figcaption { display: block; }
  .food-system__hero figcaption strong { display: block; margin-top: 8px; text-align: left; }
  .food-cycle { grid-template-columns: 1fr; margin-bottom: 70px; }
  .food-cycle article { min-height: auto; }
  .eco-story__image, .eco-story__image img { min-height: 440px; }
  .eco-story__image img { object-position: 58% center; }
  .bazar-story figure, .bazar-story img { min-height: 360px; }
  .orar-ecosystem__grid { grid-template-columns: 1fr; }
  .orar-ecosystem__grid article:last-child { grid-column: auto; }
}

@media(max-width: 900px) {
  .site-header nav {
    background:
      radial-gradient(ellipse at 18% 0%, rgba(255,255,255,.18), transparent 29%),
      linear-gradient(145deg, rgba(8,34,28,.54), rgba(14,48,40,.38));
    -webkit-backdrop-filter: blur(9px) saturate(1.4);
    backdrop-filter: blur(9px) saturate(1.4);
  }
}